You ask a 7-year-old what the three primary colors are. They say red, yellow, and blue. You ask a lighting designer. They say red, green, and blue. You ask a commercial printer. They say cyan, magenta, and yellow. All three answers are correct, and the disagreement reveals something fundamental: primary color names depend entirely on which color system you are working in.
Secondary color names have the same context-dependence. The secondary colors in traditional art (orange, green, purple) are not the secondaries in RGB light. Understanding why each system produces different answers makes the vocabulary far more useful than memorizing a single list. The color name finder covers the 140 CSS named colors, which operate entirely in the RGB system. Understanding how those named colors relate to the broader color wheel structure explains why CSS "green" (#008000) looks nothing like the green you mix from yellow and blue paint.
This guide covers every tier from primary through secondary and tertiary, the 7-color rainbow sequence, the 12-color wheel names designers rely on, and how CSS named colors map to each position.
What Are Primary Colors and Why Only Three
Primary colors are colors that cannot be mixed from other colors and from which, in theory, all other colors can be produced. The specific primaries depend on the medium.
RYB (traditional art): Red, Yellow, Blue. Taught in most schools. Based on subtractive mixing with pigments. Orange, green, and violet are the secondaries.
RGB (screens and digital light): Red, Green, Blue. Used in monitors, cameras, and all digital displays. Additive mixing: red and green light combine to make yellow. CSS and all web colors operate in this system.
CMYK (commercial print): Cyan, Magenta, Yellow, Key black. Used in inkjet and commercial printing. Subtractive mixing, like pigments, but with different primaries.
The reason these systems differ: mixing pigment (which absorbs light) behaves differently from mixing light (which emits). Mixing all pigment primaries approaches black. Mixing all light primaries approaches white. There is no universally correct set of primaries. Each describes what works for its medium.
Secondary Color Names: What Mixing Two Primaries Produces
Secondary colors result from mixing two primary colors in equal proportions.
In the RYB system:
| Mix | Secondary Color |
|---|---|
| Red + Yellow | Orange |
| Yellow + Blue | Green |
| Blue + Red | Violet / Purple |
In the RGB system (light):
| Mix | Secondary Color |
|---|---|
| Red + Green | Yellow |
| Green + Blue | Cyan |
| Blue + Red | Magenta |
The RGB secondaries feel counterintuitive to anyone trained in RYB. Red and green light make yellow because mixing those wavelengths stimulates the eye's cones in the same pattern as yellow light. This is not intuitive from a paint-mixing background, where red and green produce brown.
CSS named colors for the RGB secondaries at full saturation: yellow (#FFFF00), cyan (same as aqua, #00FFFF), and magenta (same as fuchsia, #FF00FF). These three plus the three CSS primaries define the outer corners of the RGB color cube.
Tertiary Color Names: The 12-Point Color Wheel
Tertiary colors result from mixing a primary with an adjacent secondary. In the RYB system, this produces six tertiary colors that, combined with the three primaries and three secondaries, create the standard 12-point color wheel.
| Tertiary Color | Components |
|---|---|
| Red-Orange | Red + Orange |
| Yellow-Orange | Yellow + Orange |
| Yellow-Green | Yellow + Green |
| Blue-Green | Blue + Green |
| Blue-Violet | Blue + Violet |
| Red-Violet | Red + Violet |
Tertiary names are written with the primary first. Red-orange is correct; orange-red is not standard. The ordering signals which parent color dominates: red-orange sits closer to red on the wheel, while yellow-orange sits closer to yellow.
CSS has no named colors called "red-orange" or "blue-violet." The nearest CSS named approximations: orangered (#FF4500) covers the red-orange position, yellowgreen (#9ACD32) covers yellow-green, teal (#008080) covers blue-green, and blueviolet (#8A2BE2) covers blue-violet. None are exact positional matches because the CSS set was not organized around the traditional color wheel.
The 7 Colors of the Rainbow: ROYGBIV Explained
The conventional rainbow sequence uses seven color names: Red, Orange, Yellow, Green, Blue, Indigo, Violet. The ROYGBIV mnemonic makes them memorable.
| Color | Approximate Hex | Nearest CSS Named Color |
|---|---|---|
| Red | #FF0000 | red |
| Orange | #FF7F00 | darkorange (#FF8C00, close) |
| Yellow | #FFFF00 | yellow |
| Green | #00FF00 | lime |
| Blue | #0000FF | blue |
| Indigo | #4B0082 | indigo |
| Violet | #8B00FF | darkviolet (close) |
Isaac Newton assigned seven colors partly to mirror the seven notes of a musical scale. The visible spectrum is a continuous gradient, not seven discrete bands. Indigo is genuinely contested: many color scientists argue it is not perceptually distinct enough from blue and violet to warrant its own position. The debate has been ongoing since Newton's original categorization.
VIBGYOR, used in some South Asian educational systems, is ROYGBIV reversed and names the same seven colors from violet to red.
The 12 Color Names Every Designer Should Know
The 12-color wheel used in design education lists all positions in order:
- Red (#FF0000)
- Red-Orange (approximately #FF4500)
- Orange (#FF7F00)
- Yellow-Orange (approximately #FFB300)
- Yellow (#FFFF00)
- Yellow-Green (approximately #9ACD32)
- Green (#00FF00 full intensity, or #008000 CSS)
- Blue-Green (approximately #008080)
- Blue (#0000FF)
- Blue-Violet (approximately #8A2BE2)
- Violet (#EE82EE CSS, or #8B00FF spectral)
- Red-Violet (approximately #C71585)
This 12-step sequence is the basis for color harmony rules. Complementary colors sit directly opposite each other on the wheel (red/green, orange/blue, yellow/violet). Analogous colors sit adjacent (red, red-orange, orange). Triadic colors are spaced at 120-degree intervals (red/yellow/blue, orange/green/violet). Split-complementary pairings use one color with the two colors adjacent to its complement.
RYB vs RGB vs CMYK: Which System to Use When
Getting the system wrong causes real problems. An RGB green specified for a website will not match an RYB-mixed green painted on a wall, and a CMYK file sent to a screen display will show colors outside the intended range.
Use RYB when mixing physical pigments in traditional art, fine art education, or any context where paint and dye are the medium. Color theory discussions about "warm and cool" typically reference the RYB wheel.
Use RGB for all screen-based work: websites, UI design, apps, photography, video. CSS colors are RGB. Hex codes are RGB. If you are working in a browser or any digital application, you are in RGB.
Use CMYK for any work destined for commercial print: packaging, signage, brochures, magazines. RGB files converted to CMYK can shift significantly in color because the gamut is smaller. What looks vivid on screen may print as duller.
The color format converter converts between hex (RGB) and other color formats. For understanding where any CSS named color sits on the 12-color wheel, the color name finder shows the hex, which you can then locate visually on the wheel above.
CSS Named Colors Organized by Color Wheel Position
CSS has multiple named colors at each position on the color wheel, not just one. Understanding the full set prevents defaulting to a poorly matched named color when a better one is available.
Red zone (primary): red (#FF0000), crimson (#DC143C), darkred (#8B0000), firebrick (#B22222)
Orange zone (secondary): orange (#FFA500), darkorange (#FF8C00), tomato (#FF6347), orangered (#FF4500)
Yellow zone (primary): yellow (#FFFF00), gold (#FFD700), lightyellow (#FFFFE0)
Green zone (secondary): lime (#00FF00), limegreen (#32CD32), green (#008000), forestgreen (#228B22)
Blue zone (primary): blue (#0000FF), royalblue (#4169E1), navy (#000080), cornflowerblue (#6495ED)
Violet / Purple zone (secondary): violet (#EE82EE), purple (#800080), indigo (#4B0082), blueviolet (#8A2BE2)
The most common mistake in CSS color selection is using the named color "green" (#008000) when a more vivid green was intended. CSS lime (#00FF00) and limegreen (#32CD32) are the vivid greens. CSS green is a darker, more muted version.
For building a palette based on color harmony principles, the palette generator generates complementary, analogous, and triadic combinations from any input hex. The color temperature framing that complements the color wheel is covered in the warm and cool color names guide, and unusual named colors including the CSS oddities like chartreuse and rebeccapurple are at the unique color names guide.
