You are building a palette and the colors look fine individually, but together the whole thing feels off. A red, a teal, a warm beige, and a cold gray. Nothing wrong with any of them. The problem is they belong to different color families, and mixing families without intention almost always produces visual tension that is hard to name but easy to feel.
Color families group named colors by their underlying hue into categories that share temperature, visual weight, and emotional character. The three primary families are warm, cool, and neutral. Everything in CSS's 140 named colors fits into one of those three groups, and knowing which family a color belongs to is the fastest way to explain why two colors either work together or fight each other. The color name finder lets you paste any hex code and identify the nearest named color, which immediately tells you what family you are working in.
This guide covers every CSS named color sorted by family, with hex codes, the visual logic behind each group, and how to use family membership to make faster, better palette decisions.
What a Color Family Is and Why the Categories Exist
A color family is a grouping of colors that share enough perceptual characteristics that they produce similar effects when placed next to other colors or on their own. The categories exist because color does not operate in isolation. How a color reads depends on what is next to it, how bright the environment is, and the psychological associations it carries.
The warm family, which includes reds, oranges, yellows, and pinks, gets its name from the association with fire and sunlight. These colors advance visually, meaning they appear to move toward the viewer even at the same physical distance as surrounding colors. They feel energetic, urgent, and attention-grabbing. This is not subjective preference. It is a measurable perceptual effect rooted in how the eye processes long wavelengths.
The cool family, which includes blues, greens, and purples, recedes visually. They appear to sit further back in space than warm colors at the same distance. They feel calming, expansive, and restful. Short wavelengths, which dominate the cool end of the spectrum, produce the opposite perceptual effect from long wavelengths.
Neutral colors, including whites, grays, blacks, and earth tones, do not strongly advance or recede. They provide visual rest, work as backgrounds for other colors, and connect warm and cool elements in a palette without adding directional pull. Earth tones sit on the border between warm and neutral because they carry warm hue values but at such low saturation that the advancing effect is minimal.
The Warm Color Family: Reds, Oranges, Yellows, and Pinks
The warm color family contains the largest and most varied group of CSS named colors. Reds range from the pure red (#FF0000) through deep crimson territory and all the way to the muted brownish-reds that overlap with earth tones.
CSS reds and deep reds:
| Name | Hex | Character |
|---|---|---|
| red | #FF0000 | Pure maximum-saturation red |
| crimson | #DC143C | Deep cool-leaning red, almost burgundy |
| darkred | #8B0000 | Very dark red, close to maroon |
| firebrick | #B22222 | Medium dark earthy red |
| indianred | #CD5C5C | Muted dusty red |
| maroon | #800000 | Dark brownish red |
CSS pinks and soft reds:
| Name | Hex | Character |
|---|---|---|
| hotpink | #FF69B4 | Bright medium pink |
| deeppink | #FF1493 | Saturated blue-pink |
| pink | #FFC0CB | Soft warm pink |
| lightpink | #FFB6C1 | Palest CSS pink |
| palevioletred | #DB7093 | Muted dusty rose |
| mediumvioletred | #C71585 | Deep berry-pink |
| rosybrown | #BC8F8F | Muted brownish pink |
CSS salmon, coral, and orange-reds:
| Name | Hex | Character |
|---|---|---|
| salmon | #FA8072 | Warm orange-pink |
| darksalmon | #E9967A | Muted warm salmon |
| lightsalmon | #FFA07A | Light warm salmon |
| coral | #FF7F50 | Orange-pink, leans orange |
| tomato | #FF6347 | Orange-red, brighter than coral |
| orangered | #FF4500 | Strong red-orange |
CSS oranges and yellows:
| Name | Hex | Character |
|---|---|---|
| orange | #FFA500 | Pure bright orange |
| darkorange | #FF8C00 | Deep warm orange |
| gold | #FFD700 | Rich yellow-gold |
| yellow | #FFFF00 | Maximum saturation yellow |
| lightyellow | #FFFFE0 | Very pale yellow |
| lemonchiffon | #FFFACD | Light creamy yellow |
| palegoldenrod | #EEE8AA | Pale muted gold |
| goldenrod | #DAA520 | Medium earthy gold |
| darkgoldenrod | #B8860B | Deep amber-gold |
| khaki | #F0E68C | Warm pale yellow-green |
The warm family is the right choice when the design goal is energy, urgency, or prominence. Call-to-action buttons, warning notices, and featured elements benefit from warm color selection precisely because these colors pull the eye first. In art, warm colors in the foreground create depth when paired with cool colors in the background.
The color schemes generator builds complementary and analogous palettes from any starting color. If you start from a warm red like crimson, the generator shows you which cool blues and purples will produce maximum contrast, and which adjacent warm shades will produce a harmonious analogous scheme.
The Cool Color Family: Blues, Greens, and Purples
Cool colors share the property of visual recession and produce calmer, more expansive feelings than their warm counterparts. The cool family in CSS breaks into three clear subfamilies: blues, greens, and purples.
CSS blues:
| Name | Hex | Character |
|---|---|---|
| blue | #0000FF | Pure maximum-saturation blue |
| darkblue | #00008B | Very dark blue |
| mediumblue | #0000CD | Standard medium blue |
| navy | #000080 | Very dark desaturated blue |
| midnightblue | #191970 | Near-black blue |
| royalblue | #4169E1 | Strong medium blue |
| cornflowerblue | #6495ED | Medium periwinkle blue |
| dodgerblue | #1E90FF | Bright vivid blue |
| deepskyblue | #00BFFF | Bright cyan-blue |
| steelblue | #4682B4 | Medium muted blue-gray |
| cadetblue | #5F9EA0 | Muted teal-blue |
| lightsteelblue | #B0C4DE | Very pale blue-gray |
| skyblue | #87CEEB | Light medium sky blue |
| lightskyblue | #87CEFA | Light bright sky blue |
| lightblue | #ADD8E6 | Very light soft blue |
| powderblue | #B0E0E6 | Pale cool blue |
| aliceblue | #F0F8FF | Near-white blue tint |
CSS greens:
| Name | Hex | Character |
|---|---|---|
| green | #008000 | CSS standard dark green |
| darkgreen | #006400 | Very dark green |
| forestgreen | #228B22 | Deep natural green |
| seagreen | #2E8B57 | Medium-dark ocean green |
| mediumseagreen | #3CB371 | Warm medium green |
| darkseagreen | #8FBC8F | Muted grayish green |
| lightseagreen | #20B2AA | Bright teal-green |
| palegreen | #98FB98 | Light washed green |
| lightgreen | #90EE90 | Light bright green |
| lime | #00FF00 | Maximum saturation bright green |
| springgreen | #00FF7F | Bright yellow-green |
| mediumspringgreen | #00FA9A | Bright medium spring |
| greenyellow | #ADFF2F | Yellow-leaning bright green |
| lawngreen | #7CFC00 | Very bright yellow-green |
| chartreuse | #7FFF00 | Pure chartreuse |
| yellowgreen | #9ACD32 | Muted yellow-green |
| olivedrab | #6B8E23 | Dark muted olive |
| olive | #808000 | Dark yellow-green, CSS standard |
| darkolivegreen | #556B2F | Very dark muted olive |
| teal | #008080 | Dark muted teal |
| mediumaquamarine | #66CDAA | Medium soft aqua-green |
| aquamarine | #7FFFD4 | Light bright aqua |
| cyan | #00FFFF | Maximum saturation cyan |
| aqua | #00FFFF | Same as cyan |
| turquoise | #40E0D0 | Bright medium teal |
| mediumturquoise | #48D1CC | Medium-dark turquoise |
| darkturquoise | #00CED1 | Deep bright teal |
CSS purples and violets:
| Name | Hex | Character |
|---|---|---|
| purple | #800080 | CSS standard dark purple |
| darkmagenta | #8B008B | Very dark magenta-purple |
| magenta | #FF00FF | Maximum saturation pink-purple |
| fuchsia | #FF00FF | Same as magenta |
| orchid | #DA70D6 | Medium soft purple |
| mediumorchid | #BA55D3 | Medium bright purple |
| darkorchid | #9932CC | Deep bright purple |
| darkviolet | #9400D3 | Very deep violet |
| blueviolet | #8A2BE2 | Blue-leaning violet |
| violet | #EE82EE | Light soft violet |
| mediumpurple | #9370DB | Medium muted purple |
| slateblue | #6A5ACD | Blue-leaning muted purple |
| darkslateblue | #483D8B | Dark blue-purple |
| mediumslateblue | #7B68EE | Medium light blue-purple |
| indigo | #4B0082 | Very dark blue-purple |
| plum | #DDA0DD | Light muted pink-purple |
| lavender | #E6E6FA | Very pale blue-purple |
| thistle | #D8BFD8 | Very pale muted purple |
| rebeccapurple | #663399 | Medium dark purple |
In the color tools section, you can view any named color alongside its hex and RGB values. When you are working with a cool palette and need to verify contrast ratios for text, the contrast checker measures the WCAG ratio against white or any custom background. Dark navy on white typically passes AAA at normal sizes. Light sky blue on white rarely passes AA, which matters when you are using cool colors for body text.
The Neutral Color Family: Whites, Grays, Blacks, and Earth Tones
Neutrals are the connective tissue of any palette. They do not pull the eye in a particular direction, which makes them indispensable as backgrounds, borders, and grounding elements.
CSS whites and near-whites:
| Name | Hex | Character |
|---|---|---|
| white | #FFFFFF | Pure white |
| snow | #FFFAFA | Near-white with pink tint |
| ivory | #FFFFF0 | Near-white with yellow tint |
| floralwhite | #FFFAF0 | Warm near-white |
| oldlace | #FDF5E6 | Warm creamy white |
| linen | #FAF0E6 | Warm beige-white |
| antiquewhite | #FAEBD7 | Warm creamy near-white |
| whitesmoke | #F5F5F5 | Very light neutral gray |
| ghostwhite | #F8F8FF | Very light blue-white |
| seashell | #FFF5EE | Very light warm near-white |
| honeydew | #F0FFF0 | Very light green-tinted white |
| mintcream | #F5FFFA | Very light cool near-white |
| azure | #F0FFFF | Very light cyan-tinted white |
| lavenderblush | #FFF0F5 | Very light pink-tinted white |
| mistyrose | #FFE4E1 | Very light warm pink-white |
CSS grays:
| Name | Hex | Character |
|---|---|---|
| gainsboro | #DCDCDC | Very light neutral gray |
| lightgray | #D3D3D3 | Light neutral gray |
| silver | #C0C0C0 | Medium light gray |
| darkgray | #A9A9A9 | Medium gray |
| gray | #808080 | CSS standard middle gray |
| dimgray | #696969 | Medium dark gray |
| lightslategray | #778899 | Medium gray with blue tint |
| slategray | #708090 | Medium-dark gray with blue tint |
| darkslategray | #2F4F4F | Very dark gray-teal |
CSS blacks:
| Name | Hex | Character |
|---|---|---|
| black | #000000 | Pure black |
Earth tones (neutral-warm border):
| Name | Hex | Character |
|---|---|---|
| saddlebrown | #8B4513 | Deep earthy brown |
| sienna | #A0522D | Warm reddish brown |
| chocolate | #D2691E | Medium warm brown |
| peru | #CD853F | Medium golden brown |
| sandybrown | #F4A460 | Light warm sandy orange |
| burlywood | #DEB887 | Light muted tan |
| tan | #D2B48C | Light warm beige |
| wheat | #F5DEB3 | Very light warm tan |
| rosybrown | #BC8F8F | Muted brownish pink |
| brown | #A52A2A | Medium dark earthy red-brown |
Earth tones deserve special attention because they sit on the boundary between warm and neutral. Saddlebrown, sienna, and peru carry clear hue values in the warm orange-red zone, but their saturation is low enough that they behave more like neutrals in a palette. You can pair them with cool blues and greens without the visual tension that a fully saturated warm color would create.
Why Some Colors Fall Between Families
Color family membership is not always clean. Several CSS named colors sit at genuine boundaries where reasonable people categorize them differently.
Olive (#808000) is a dark desaturated yellow. It belongs to the warm family by hue angle, but at this saturation and lightness level it reads more like a neutral in practice. Pair olive with a saturated red and it looks grounded rather than warm. Pair it with pure white and it reads as an earthy accent rather than a yellow.
Darkslategray (#2F4F4F) is a very dark teal-gray. It has a measurable cool hue, but it reads almost black in most contexts. In a palette, it behaves like a neutral dark anchor rather than a cool color.
Greenyellow (#ADFF2F) and chartreuse (#7FFF00) sit exactly at the warm-cool boundary. Their hue angle falls at 60 to 90 degrees on the hue wheel, which is the transition zone between yellow (warm) and green (cool). Both feel energetic like warm colors, but they lean toward the cool side when placed next to pure yellows.
Rosybrown (#BC8F8F) is in the earth tone and pink border. Its hue reads as a very muted pink, placing it in the warm family, but its low saturation and brownish undertone put it close to neutral territory.
For any color that is genuinely ambiguous, the most reliable approach is perceptual: place the color next to a clear warm, a clear cool, and a clear neutral, and observe which group it sits with most comfortably. The color name finder uses Delta-E calculations in CIE Lab space to find the perceptually nearest CSS named color, which often resolves family ambiguity more reliably than checking hue angles alone because CIE Lab accounts for how the eye perceives differences rather than just measuring them mathematically.
How Color Families Are Used in Design and CSS
Color families give you a framework for making palette decisions without needing to evaluate every combination from scratch. A few reliable rules follow from understanding family membership.
Single-family palettes use colors from one family only and rely on lightness and saturation variation to create contrast. A warm palette with three reds at different lightness levels and a gold accent feels unified without requiring any neutrals. These palettes read as highly intentional but can feel monotonous if the lightness variation is too narrow.
Two-family palettes combine one warm color with one cool color and use neutrals to stop them from fighting. A UI that uses dodgerblue as the primary action color and tomato as a warning or error color is using this structure. The contrast between families creates clear hierarchy. Neutrals in the background keep the warm and cool elements from overwhelming each other.
Temperature contrast is the design principle that uses warm and cool family separation intentionally. A warm foreground element on a cool background advances. A warm call-to-action button on a cool brand palette draws the eye first even if it is physically smaller than the surrounding cool elements.
In CSS specifically, using named colors is most common in rapid prototyping and documentation. When your color choices come from named colors, knowing their family membership makes it straightforward to swap between options within a family. Swapping navy for midnightblue or darkslateblue keeps you within the cool family and maintains the palette temperature. Swapping navy for darkslategray crosses from cool to neutral and can subtly change how the palette reads.
When you are building a palette from scratch and need to verify how your selected colors interact, the color schemes generator produces complementary, analogous, and triadic schemes from any starting hex. Running a warm starting color through the complementary scheme output shows you its opposing cool color, which is a reliable way to find the cool counterpart for a two-family palette.
Finding Which Family Any Color Belongs To
The fastest manual method for assigning family membership is to check the HSL hue angle. Colors with a hue between 0 and 60 degrees and between 300 and 360 degrees are warm (reds, oranges, yellows, and pinks). Colors between 60 and 180 degrees are in the warm-to-cool transition zone (yellow-greens, greens, and cyans). Colors between 180 and 300 degrees are cool (blues and purples). Colors with saturation below about 10 percent are neutral regardless of hue.
For any color you encounter as a hex code in the wild, including paint brands, design systems, and image files, paste it into the color name finder. The tool identifies the nearest CSS named color using perceptual Delta-E distance in CIE Lab space. This is more precise than hue-angle matching because it accounts for perceptual lightness and chroma, not just hue. A very dark purple and a very dark navy might have different hue angles but land on the same family classification after perceptual matching because their lightness and chroma are so similar that the hue difference becomes secondary.
For colors extracted from images, whether a product photo, a reference image for a branding project, or a landscape photograph you want to derive a palette from, the color palette generator from image extracts the dominant colors automatically. Once you have those extracted hex codes, running them through the color name finder tells you which CSS families they belong to, which immediately tells you whether your source image is warm-dominant, cool-dominant, or neutrally balanced.
The color family framework does not replace specific color knowledge, but it gives you a working vocabulary for diagnosing palette problems quickly. When a palette feels off, checking whether you have accidentally mixed families without a connecting neutral is often the first thing to look at. Get that right and most other palette decisions become easier.
