Color Palette Picker

Understanding color: hue, saturation, and lightness

Before diving into formats and harmonies, it helps to understand the three perceptual properties that define every color. These properties correspond directly to how our visual system processes light, and they map cleanly onto the HSL color model used in modern CSS.

Hue is the "what color is it?" dimension. It is measured as an angle on the color wheel, running from 0° to 360°. Red sits at 0°, green at 120°, and blue at 240°. Colors blend smoothly between those anchors: 30° is orange, 60° is yellow, 180° is cyan, and 270° is violet. Hue alone does not tell you whether a color looks washed-out or deep, bright or dark — it only tells you which part of the spectrum the color belongs to.

Saturation describes how vivid or muted the color is. A saturation of 100% gives you a pure, fully chromatic hue with no gray mixed in. As you lower saturation toward 0%, the color becomes increasingly gray until, at 0%, you are left with a neutral tone — either white, black, or a shade of gray depending on the lightness value. Colors with low saturation are often called "desaturated," "muted," or "dusty." They work well as backgrounds and supporting elements because they do not compete visually with higher-saturation accent colors.

Lightness controls how light or dark the color appears. At 50% lightness you get the purest expression of the hue (assuming full saturation). Increasing lightness toward 100% gradually adds white until the color becomes pure white. Decreasing toward 0% gradually adds black until the color is completely dark. In a design system, you typically keep the hue and saturation fixed while varying lightness to generate a scale of shades — from a near-white tint at 95% down to a near-black shade at 10%. This is exactly how Tailwind CSS builds its palette steps (100 through 950 for each color family).

Understanding these three dimensions makes color work predictable. Instead of guessing hex codes, you can reason: "I need a lighter version of this blue for the hover state, so I will increase L by ten percentage points." Or: "This button color is too intense for a background, so I will drop saturation from 80% to 30%." The Color Palette Picker exposes all three sliders, letting you make these deliberate adjustments instead of clicking around blindly.

Color format conversion

The tool converts instantly between four formats. Enter any value in any format and the others update immediately — no button press needed.

HEX is the most common format in web development. Each pair of hexadecimal digits encodes one color channel from 0 (00) to 255 (FF). The format is compact and widely supported, which is why tools like Figma, Tailwind, and browser DevTools all default to it. However, HEX values are opaque: looking at #6366f1 gives you little intuition about how to adjust the color without converting it first.

RGB expresses the same three channels as decimal integers between 0 and 255. The format is native to how displays work — screens mix red, green, and blue light (additive color) to produce all visible colors. RGB values map directly to the underlying hardware model and are used heavily in canvas, WebGL, and image-processing code. When you need to manipulate individual channels programmatically — for instance, to compute a luminance value or apply a color matrix transform — working with RGB integers is the most natural approach.

HSL (Hue, Saturation, Lightness) is the most intuitive format for design decisions. The three numbers correspond directly to the perceptual dimensions described above, so adjustments are predictable rather than experimental. CSS has supported hsl() natively since CSS3, and modern CSS Color Level 4 extends it with an optional alpha channel in the format hsl(239 84% 67% / 0.8). For design systems and CSS custom property themes, HSL is often the best format to store base values in because it scales so cleanly.

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in physical printing. Screens emit light, so they use additive mixing; printers deposit ink, which absorbs light, so they use subtractive mixing. The same nominal color looks different in print versus on screen because of this model difference, and it varies further depending on the paper stock and printer profile. For print design, treat the CMYK output from this tool as a starting point and verify with a calibrated proofing workflow before final production.

Converting between HEX and RGB is arithmetic: split the hex string into three two-character pairs and parse each as a base-16 number. Converting to HSL requires normalizing the RGB channels to [0, 1], identifying the maximum and minimum channel values, and then applying a series of formulas to derive hue, saturation, and lightness. The tool handles all of this transparently — you just type any value and the others update.

Harmony palette generation

Color harmony rules come from color theory — they define relationships between hues on the color wheel that tend to look visually coherent together. Pick a base color and the tool generates swatches for each harmony type automatically.

Color harmonies in depth

The four harmony types above represent the most commonly used relationships, but each has important nuances that affect how you should apply them in real design work.

Complementary pairs create the strongest possible contrast between two hues. This makes them powerful for drawing attention — an orange button on a blue background stands out immediately — but also risky. When two complementary colors are used in equal amounts at full saturation, they can visually vibrate against each other in an uncomfortable way. The practical rule is to use one color as the dominant and let the other appear sparingly as an accent. A ratio of roughly 70% dominant to 30% accent avoids the tension while preserving the contrast energy.

Analogous harmonies produce the most natural-feeling palettes because they mirror the gradual transitions you see in nature — a sunset moving through orange, red, and pink, or a forest moving through yellow-green, green, and blue-green. Because adjacent hues share color "DNA," they create low perceptual contrast and feel cohesive. This makes analogous palettes excellent for backgrounds, data visualizations that need to feel calm, and hero sections that should feel immersive rather than energetic. The limitation is that without contrast, it can be hard to guide a user's eye. You usually need to pair an analogous background palette with a higher-saturation accent for interactive elements.

Triadic schemes give you three hues with equal spacing, which means each pair within the trio is roughly complementary to some degree — producing vibrancy across the whole palette. Red, yellow, and blue form the classic primary triad. In UI design, triadic palettes work best when you assign clear roles to each hue: one for primary interactions (buttons, links), one for secondary elements (badges, icons), and one used sparingly for alerts or highlights. Because all three hues compete for attention at full saturation, you will often desaturate two of them and let only one carry the design's energy.

Split-complementary is often called the "beginner's complementary" because it keeps the contrast energy of a complementary pair while reducing the risk of visual conflict. Instead of using the exact opposite hue, you pick the two hues on either side of it — about 30° away from the true complement. If your base is blue (240°), a pure complementary would be orange (60°), but a split-complementary gives you yellow-orange (30°) and red-orange (0°/360°). The result still pops against the blue, but feels richer and more sophisticated.

Two additional harmonies worth knowing: tetradic (rectangle) schemes use four hues at 90° intervals, giving you the richest palette but also the hardest to balance. Square schemes use four hues at 90° intervals as well but with equal spacing — similar to tetradic but with all four hues at the same perceived weight. Both of these are best left to experienced designers or generated algorithmically, which is exactly what the tool does when you select these options.

HSL is the most useful format for code

HEX and RGB describe colors by their component values, which makes it hard to mentally adjust them. HSL (Hue, Saturation, Lightness) maps to how humans perceive color, making it much more intuitive for code-level adjustments:

• →To make a color lighter: increase the L value (hsl(239, 84%, 80%))
• →To make it more muted: decrease S (hsl(239, 30%, 67%))
• →To shift the hue: change H by small increments (239 → 250 moves it slightly more blue)
• →Tailwind CSS uses HSL internally for its color system, which is why Tailwind palettes scale predictably

One powerful pattern in modern CSS design systems is to store all color values as HSL components inside custom properties, then assemble them in the hsl() function at usage time. For example, define --color-primary-h: 239, --color-primary-s: 84%, and --color-primary-l: 67% as separate tokens. Then in your component styles you write color: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l)). This approach lets you override just the lightness channel for hover states, just the saturation for disabled states, or just the hue for themed variants — without redefining entire color values. The Color Palette Picker can output palettes in exactly this CSS custom property format.

Another common use of HSL in code is generating shades programmatically. If you start with a base hue and saturation — say, a blue at H=217, S=91% — you can generate a full ten-step scale by stepping lightness from 95% down to 10%. This is how most design systems including Tailwind, Material Design, and Chakra UI build their color ramps. The result is perceptually consistent because the hue and saturation remain constant while only brightness changes.

Building a usable palette for web and brand design

A production-ready UI palette is not just a set of pretty colors — it is a structured system that assigns specific roles to each color so that the design communicates hierarchy, state, and meaning consistently across every screen.

Start with a primary color. This is the dominant brand color used for main call-to-action buttons, links, and active states. It should be your most distinctive hue — the one that users will associate with your brand. Choose it for its distinctiveness and emotional resonance, then use the Color Palette Picker to generate a full lightness scale around it. You will typically use a mid-lightness value (around 55-65%) for filled buttons, a lighter value (75-85%) for secondary fills and backgrounds, and a darker value (35-45%) for pressed states and high-emphasis text.

A secondary color complements the primary and is used for supporting interactive elements, badges, progress bars, and anything that needs to stand out from the background but should not compete directly with primary actions. In a well-designed system, the secondary color is either analogous to the primary (within 30-60° on the wheel) for a harmonious feel, or a split-complementary offset for contrast that still feels intentional. If your primary is a blue-indigo, a secondary might be a teal (analogous) or a warm amber (split-complementary).

Accent colors appear sparingly — often in only one or two places across the entire interface. Their job is to draw the eye to a specific element: a notification badge, a new-feature tag, or a trending indicator. Because accent colors appear in small doses, they can be more saturated and energetic than your primary or secondary colors without overwhelming the design. The complementary color of your primary is a natural starting point for an accent.

Neutral colors do the quiet heavy lifting of the palette. They form the backgrounds, borders, text, and surface colors that make up the majority of every screen. A good neutral scale starts from a near-white (lightness 97-98%) and progresses through subtle warm or cool grays to a near-black (lightness 8-12%). The choice to use warm neutrals (slightly yellow or orange undertone, around H=30-40) versus cool neutrals (slightly blue undertone, around H=210-230) significantly affects the overall feel of the interface. Many modern apps use cool neutrals with a blue-indigo primary, while warmer brand colors work better with warm neutrals. When you pick a primary in the Color Palette Picker, use it as a reference when building your neutral scale — a slight tint of the primary hue in the neutrals creates subtle coherence.

Semantic colors are your fourth category: success green, warning amber, error red, and info blue. These are not arbitrary — users have strong expectations about what red means (danger, error, delete) and what green means (success, safe, go). Keep semantic colors close to their conventional hues even if they diverge from your primary palette. A green at roughly H=120-145 reads as "success" to most users; a red at H=0-10 reads as "error." You can adjust saturation and lightness to match your overall palette's weight and feel without breaking the semantic signal.

Contrast and accessibility: WCAG AA and AAA

Color contrast is not an optional concern — it is a legal requirement in many jurisdictions and a practical necessity for users with low vision, color deficiencies, or environments with poor screen quality (outdoor use, cheap displays, glare). The Web Content Accessibility Guidelines (WCAG) define two conformance levels for contrast:

WCAG AA is the standard most organizations target. It requires a contrast ratio of at least 4.5:1 for normal-sized text (below 18pt or 14pt bold) and 3:1 for large text. A ratio of 4.5:1 means the lighter color reflects 4.5 times as much light as the darker color. Pure white on pure black has a ratio of 21:1, the maximum possible. A medium gray (#767676) on white just barely meets AA for large text at exactly 4.5:1 — which is why that specific gray is commonly referenced as the minimum accessible body text color on a white background.

WCAG AAA is the enhanced level, targeting the highest degree of accessibility. It requires 7:1 for normal text and 4.5:1 for large text. AAA is much harder to achieve while maintaining a visually interesting palette — it essentially means your text color must be very dark or your background very light (or both). Most organizations aim for AAA on body text and critical information, while accepting AA for decorative elements, large headings, and UI components where the shape and position also carry meaning.

The contrast ratio formula uses relative luminance, which is a weighted combination of the linearized RGB channels. The weights (0.2126 for red, 0.7152 for green, 0.0722 for blue) reflect the different sensitivity of the human eye to each wavelength — we are most sensitive to green and least sensitive to blue. This means that two colors at the same HSL lightness can have very different luminance values if they differ in hue: a pure green at 50% lightness is perceptually much brighter than a pure blue at the same lightness.

Practical implications for palette building: when selecting text and background colors, always verify the contrast ratio with a checker rather than trusting visual impression. Colors that look fine on a calibrated designer monitor at 100% brightness often fail in real usage. A safe default for body text on light backgrounds is to use a near-black with some of your primary hue mixed in — for example, hsl(239, 15%, 12%) on a white background gives a ratio well above 7:1 while feeling less harsh than pure black. The Color Palette Picker's contrast checker lets you pick any two colors from your palette and instantly see the ratio and which WCAG level is met.

Color deficiency (color blindness) affects roughly 8% of men and 0.5% of women with typical vision. The most common form is red-green deficiency (deuteranopia and protanopia), where users cannot reliably distinguish red and green hues. This means you should never use red versus green as the only way to communicate meaning — always combine color with a secondary cue such as an icon, a label, or a position. Use the tool's palette preview to check how your colors look under simulated color deficiency — many professional design tools provide this filter, and it quickly reveals problematic combinations.

Practical tips for web and brand design

Knowing color theory is necessary but not sufficient — the gap between theory and a well-executed palette is bridged by practical decisions about how colors are applied in context. Here are the most useful principles from working design practice.

Start with fewer colors than you think you need. A two-hue palette with a full range of tints, shades, and neutrals is almost always more cohesive than a five-hue palette where each hue is only used in one or two shades. Every additional hue adds visual complexity and requires another set of shade steps. Start with one primary and one neutral scale; add a secondary only when you have a clear use case for it; add an accent only when you need something that secondary cannot provide.

Use saturation to create hierarchy. High-saturation colors draw the eye; low-saturation colors recede. This means primary actions and key information should use higher saturation, while supporting content, disabled states, and background fills should use lower saturation. You can maintain the same hue throughout — increasing or decreasing saturation creates "importance levels" within a single color family without introducing new hues.

Dark mode is not just "invert the colors." In light mode your backgrounds are near-white and your surfaces are white or very light gray. In dark mode, swap to a very dark background (not pure black — around hsl(H, 10%, 8-12%) works better than #000000 because pure black creates too much contrast with any colored element). Your primary hue often needs a lightness boost in dark mode to maintain the same WCAG contrast ratios. A primary button at hsl(239, 84%, 67%) might need to shift to hsl(239, 84%, 75%) to maintain sufficient contrast against a dark surface.

For brand design, consider color associations and cultural context. Blue is widely associated with trust, stability, and technology — which is why banks and social networks have historically defaulted to it. Green signals growth, nature, and success. Red carries urgency and can evoke energy or danger. Yellow is associated with warmth and optimism but can feel cautionary. These associations are not absolute and vary by culture, but they are strong defaults that your palette will either reinforce or work against. Reinforce them when you want to communicate expected attributes; intentionally break them when you want to stand out or signal something unexpected about your brand.

When exporting a palette for a CSS design system, use the HSL format and name your tokens semantically rather than descriptively. A token named --color-primary-500 is more useful than --color-blue-medium because it communicates role and scale rather than a color description that may no longer be accurate if you ever rebrand. Name your token scale in steps (100 through 900 or 50 through 950) to match the conventions of Tailwind and other popular systems, making it easier for developers to work intuitively with the palette.

Frequently Asked Questions