Why Color Is Harder Than It Looks§

Every designer has the experience: a color looks great on their monitor, then completely different on a client's laptop, washed out on a phone, or invisible to a color-blind user. Color on screens is a surprisingly technical subject — and understanding the underlying formats and models makes you dramatically better at choosing and using colors.

The NexaTools Color Picker lets you pick colors visually, convert between all formats, generate palettes, and check contrast ratios — all in your browser with no signup.

Color Formats Explained§

Hexadecimal (Hex)§

The most common web color format: #RRGGBB where each pair of hex digits represents the intensity of Red, Green, and Blue from 00 (none) to FF (full, 255 decimal).

  • #FF0000 = pure red (R:255, G:0, B:0)
  • #00FF00 = pure green
  • #0000FF = pure blue
  • #FFFFFF = white (all channels maxed)
  • #000000 = black (all channels zero)
  • #808080 = 50% gray

Shorthand: when both hex digits in each pair are identical, you can write 3 digits. #FF0000 = #F00, #AABBCC = #ABC.

RGB§

rgb(255, 0, 0) — same information as hex, but in decimal. Easier to read for humans. Also supports alpha transparency: rgba(255, 0, 0, 0.5) is 50% transparent red.

HSL§

hsl(Hue, Saturation%, Lightness%) — a more intuitive color model designed to match how humans think about color:

  • Hue: The "color" itself, expressed as degrees on a color wheel (0°=red, 120°=green, 240°=blue)
  • Saturation: How vivid the color is (0% = gray, 100% = full color)
  • Lightness: How light or dark (0% = black, 50% = normal, 100% = white)

HSL is far easier to adjust than hex or RGB:

  • Make a color lighter: increase Lightness
  • Make a color more muted: decrease Saturation
  • Get the complementary color: add 180° to Hue

Most design systems and CSS frameworks expose HSL-based tokens for exactly this reason.

HSB / HSV§

Similar to HSL but with "Brightness" or "Value" instead of "Lightness." Used in Photoshop and most creative design apps. The math differs slightly from HSL — a common source of confusion when copying colors between tools.

OKLCH (Modern CSS)§

The newest color format in CSS: oklch(L C H) — Lightness, Chroma, Hue in a perceptually uniform space. OKLCH is designed so that equal mathematical changes produce equal-looking visual changes, regardless of which color you're adjusting. This is a major improvement over HSL, where adjusting lightness in the blue range looks very different from adjusting it in the yellow range.

/* OKLCH in modern CSS */
color: oklch(70% 0.15 200);

Supported in all modern browsers as of 2023.

Converting Between Formats§

The NexaTools Color Picker converts between all formats instantly:

  1. Open the tool: Visit Color Picker
  2. Pick a color: Use the visual picker, enter a hex code, or enter RGB/HSL values
  3. See all formats: Hex, RGB, HSL, HSB, and OKLCH equivalents shown simultaneously
  4. Copy: Click any format to copy it to the clipboard

Color Theory Basics for UI Design§

The color wheel and relationships§

Colors that work well together follow predictable relationships on the color wheel:

  • Complementary: Opposite colors (red/green, blue/orange). High contrast, vibrant, but can clash if overused.
  • Analogous: Adjacent colors (blue, blue-green, green). Harmonious, calm, low contrast.
  • Triadic: Three equally-spaced colors (red, yellow, blue). Balanced, colorful.
  • Split-complementary: A base color + two colors adjacent to its complement. Balanced with some tension.

The 60-30-10 rule§

In interior design (and equally applicable to UI design):

  • 60% of the design uses the dominant color (usually a neutral background)
  • 30% uses a secondary color (panels, headers, sections)
  • 10% uses the accent color (buttons, links, highlights, calls-to-action)

This ratio creates visual hierarchy without overwhelming the user.

Tints, shades, and tones§

  • Tint: Adding white to a color (lighter)
  • Shade: Adding black to a color (darker)
  • Tone: Adding gray to a color (more muted)

Design systems like Tailwind CSS generate a full spectrum of tints and shades for each color (100 through 900) to give designers a consistent range to work with.

Contrast Ratio: Accessibility Requires It§

Web accessibility standards (WCAG 2.1) require minimum contrast ratios between text and background:

Level Contrast Ratio Who it applies to
AA (minimum) 4.5:1 for normal text, 3:1 for large text Required for legal compliance in many jurisdictions
AAA (enhanced) 7:1 for normal text, 4.5:1 for large text Recommended for critical content

Contrast ratio is calculated from the relative luminance of two colors. White on black is 21:1. Black on black is 1:1. Light gray text on white is often below 2:1 — failing even the minimum standard.

Common failing combinations:

  • Light blue #6CB4E4 on white: ~2.8:1 (fails AA)
  • Yellow #FFD700 on white: ~1.8:1 (fails badly)
  • Dark gray #555555 on white: ~7.5:1 (passes AAA)

The NexaTools color picker shows the WCAG contrast ratio for any two colors you compare and indicates whether they pass AA or AAA.

Building a Color Palette for a UI Project§

A practical process for selecting a UI color palette:

Step 1: Pick your brand color§

Start with one primary color that reflects the brand's personality. Enter it in the color picker to get its HSL values.

Step 2: Generate your scale§

Create 9–10 lightness variants: 50 (nearly white) through 950 (nearly black). In HSL, keep hue and saturation fixed, vary lightness systematically.

Step 3: Choose a neutral palette§

Neutrals (grays) carry most of your UI. A slight warm or cool tint to your grays (adjusting hue slightly toward your brand color) makes them feel cohesive rather than generic.

Step 4: Define semantic colors§

Map specific colors to semantic roles:

  • --color-success: Green (accessible shade)
  • --color-warning: Amber
  • --color-danger: Red
  • --color-info: Blue

Step 5: Test for contrast§

For every text/background combination you'll use, verify contrast ratio passes WCAG AA at minimum.

The Color Palette Generator§

Beyond the single-color picker, the NexaTools Color Palette Generator generates complete harmonious palettes: complementary, analogous, triadic, and monochromatic schemes from any starting color.

Pick, convert, and test colors with NexaTools Color Picker — Hex, RGB, HSL, OKLCH, contrast ratios, all in one free tool.