How color actually works on screens
A screen emits light, and color on a screen is the result of mixing three primary light sources: red, green, and blue. Each pixel on a typical display is made of three sub-pixels, one for each primary, and the intensity of each sub-pixel is controlled by an 8-bit value from 0 (off) to 255 (full on). The combinations produce about 16.7 million distinct colors, which is what 24-bit color or true color refers to in display specs. The sRGB color space, defined by HP and Microsoft in 1996 and formalized by the IEC as IEC 61966-2-1, is the default color space for the web and assumes this 8-bit-per-channel model.
Color mixing by light is additive, which is the opposite of paint mixing. With paint, mixing all colors produces black, because paint absorbs light. With light, mixing all colors at full intensity produces white, because you are adding photons. This is why the RGB model is fundamental to screens and the CMYK model (cyan, magenta, yellow, black) is fundamental to printing. The two systems describe overlapping but not identical ranges of color, and converting between them always loses information.
The human eye has three types of cone cells sensitive to roughly red, green, and blue wavelengths, which is why three primaries are enough to reproduce most of the colors we can see. The full range of colors visible to the human eye, called the gamut, is larger than what sRGB can reproduce. Wider gamuts like Adobe RGB (used in photography) and Display P3 (used in modern Apple devices) cover more of the visible spectrum, but content authored in sRGB will look the same on a wider-gamut display unless the software explicitly remaps it.
The color models: RGB, HSL, HEX
RGB is the native model of the screen, but it is a poor way for humans to choose colors. Three numbers like 16, 185, 129 tell you the intensity of each primary, but they do not tell you at a glance whether the color is green or teal, whether it is bright or dark, or how saturated it is. You have to do mental arithmetic to translate.
HSL, short for Hue, Saturation, Lightness, is a more human-friendly model that maps to how we describe colors in language. Hue is the position on the color wheel, measured in degrees from 0 (red) through 60 (yellow), 120 (green), 180 (cyan), 240 (blue), 300 (magenta), and back to 360. Saturation is the purity of the color, from 0 (gray) to 100 (fully saturated). Lightness is how bright the color is, from 0 (black) through 50 (the pure hue) to 100 (white). The emerald accent used across this site is HSL(160, 84%, 39%) — a green-cyan hue, highly saturated, somewhat dark.
HEX is the standard web notation for RGB, using two hexadecimal digits per channel. The emerald #10b981 breaks down as 10 (16 in decimal) for red, b9 (185) for green, 81 (129) for blue. The shorthand #RGB expands to #RRGGBB, so #1b9 is #11bb99. The 8-digit form #RRGGBBAA adds an alpha channel for opacity, with FF being fully opaque and 00 fully transparent. CSS also supports the rgb() and hsl() functions with optional alpha, so rgb(16 185 129 / 0.5) is the same color at 50 percent opacity. Use whichever form is most readable for the context.
Color harmony schemes that hold up
Color harmony is the practice of choosing multiple colors that look pleasant together. The schemes are derived from positions on the color wheel, but they are starting points, not laws. A monochromatic scheme uses one hue with varying saturation and lightness; it is the safest choice for a clean, focused design and is what most minimal sites use. An analogous scheme uses three hues adjacent on the wheel, like blue, blue-green, and green; it produces a calm, coherent feel because the hues share undertones.
A complementary scheme uses two hues directly opposite on the wheel, like blue and orange. The high contrast can be vibrant but is hard to balance; using one as the dominant color and the other as an accent usually works better than 50/50. A split-complementary scheme replaces one of the complements with the two hues adjacent to it, softening the contrast. A triadic scheme uses three hues 120 degrees apart (red, yellow, blue) and is balanced but visually busy; tone down the saturation if you use it.
The practical rule is to pick one dominant color, one accent color, and a small set of neutral grays. The 60-30-10 rule from interior design applies: 60 percent of the surface in the dominant color, 30 percent in a secondary, 10 percent in the accent. For most interfaces, this means a near-white or near-black background, a mid-gray for surfaces and borders, and a single saturated accent for interactive elements. Adding a second accent for warnings or errors (often amber or red) is fine, but adding a third pushes the design toward circus.
Contrast, accessibility, and WCAG
Color contrast is the difference in luminance between two colors, and it is the most important accessibility property of a color choice. The Web Content Accessibility Guidelines (WCAG), published by the W3C, specify minimum contrast ratios for text against its background. The current version, WCAG 2.1, requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18 point or 14 point bold) at level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
The ratio is computed from the relative luminance of each color, which is a weighted sum of the linearized RGB channel values. The formula is non-linear because human perception of brightness is non-linear; a mid-gray on a black background looks brighter than the same gray on a white background. Online contrast checkers like the one at webaim.org compute this for you, but it helps to understand the principle. Pure black on pure white has a ratio of 21:1; the minimum 4.5:1 is roughly dark gray on white.
Common contrast failures include gray text on white (light grays fail), low-saturation accent colors on white, and text on top of images without an overlay. Designers often choose light gray for secondary text to de-emphasize it, then fail AA. A safer approach is to vary font weight and size for hierarchy rather than relying on light gray. For accent colors, pick the darkest shade that still reads as the intended hue; a teal at 60 percent lightness will usually pass AA on white, while the same hue at 80 percent will not.
Building a palette from scratch
Start with the accent color, the one color that will identify your brand. Choose it deliberately: a hue, a saturation above 50 percent for vibrancy, and a lightness around 40 to 50 percent so it has enough body to pass AA on white. From this base, generate a 9-step ramp from 50 (lightest) to 900 (darkest). Each step changes lightness by about 10 percent and saturation by a few percent. Tools like the Tailwind color palette generator and Radix Colors produce these ramps automatically.
The 50 and 100 steps are very light tints, used for backgrounds of selected states, subtle highlights, and badges. The 200 to 400 steps are medium tints, used for hover states and borders. The 500 step is the base color. The 600 to 900 steps are darker shades, used for text on light backgrounds and for pressed states. The 900 step is dark enough to use as body text and still pass AAA on white.
Add a set of neutral grays using the same ramp structure, but with a hue close to your accent so the grays are not pure. A pure gray (no hue) feels cold and clinical; a gray with a slight warm or cool tint feels more designed. Tailwind's stone (warm gray) and zinc (cool gray) are examples. Add semantic colors — green for success, amber for warning, red for danger, blue for information — using the same ramp structure, so they feel like part of the same family. Stop there. Most palettes fail by adding too many colors, not too few.
Common mistakes and how to spot them
The first mistake is using pure RGB primaries (#FF0000, #00FF00, #0000FF). These colors do not exist in nature and look harsh on screen. The fix is to pick a slightly desaturated, slightly darker version: #DC2626 instead of #FF0000 for red, #16A34A for green. The eye reads these as the same hue but they do not assault it.
The second mistake is choosing colors that look good in isolation but clash together. Test your palette by placing all the colors in a single row at the same size. If any color jumps out as not belonging, either remove it or adjust its hue. The eye should move smoothly across the row.
The third mistake is ignoring dark mode. A palette designed for white backgrounds will look wrong on black backgrounds, because the perceived brightness inverts. For dark mode, you typically invert the lightness scale: use lighter shades of your accent (300 or 400 instead of 600 or 700) and lighter grays for text. Test your palette on both light and dark backgrounds before shipping. The fourth mistake is relying on color alone to convey information, which fails for color-blind users: about 8 percent of men have some form of color vision deficiency. Always pair color with a text label, an icon, or a pattern.