Free Color Picker

🎨 Color Models Explained

A color model is a mathematical system for representing colors as numbers. Different industries and applications use different models, each optimised for its specific context. Understanding the major color models helps you work more effectively across design, development and print.

RGB — Red, Green, Blue

RGB is the color model of screens and displays. It is an additive model — colors are created by mixing light at different intensities. Each channel ranges from 0 (none of that color) to 255 (maximum intensity). RGB(0,0,0) is black (no light); RGB(255,255,255) is white (maximum of all colors).

RGB is the native model for all digital displays including monitors, TVs, smartphones and tablets. Every CSS color, every image on the web and every design created for screen use is ultimately expressed in RGB values.

HEX — Hexadecimal RGB

HEX is simply RGB expressed in hexadecimal (base-16) notation. Each channel is represented by two hexadecimal digits, so a full HEX color is a 6-character string prefixed with #. The values 00 to FF in hex correspond to 0 to 255 in decimal. HEX is the most commonly used color format in web development because it is compact and readable.

HSL — Hue, Saturation, Lightness

HSL reorganises RGB into a more intuitive cylindrical model. Hue is the color angle on a 360° wheel (0° = red, 120° = green, 240° = blue). Saturation is the vividness from 0% (grey) to 100% (pure color). Lightness ranges from 0% (black) through 50% (the pure color) to 100% (white).

HSL is particularly valuable in design because it allows natural color manipulation — to make a color lighter, simply increase the lightness value. CSS supports HSL natively, making it the preferred format for design systems and theme-based stylesheets.

HSV — Hue, Saturation, Value (Brightness)

HSV is similar to HSL but uses Value (brightness) instead of Lightness. The key difference: in HSV, 100% value with 100% saturation produces a vivid pure color; in HSL, the same vivid color is at 50% lightness. HSV is the model used in most professional design tools including Adobe Photoshop and Illustrator, making it important for designers working between applications.

CMYK — Cyan, Magenta, Yellow, Key (Black)

CMYK is the color model of printing. Unlike RGB which adds light, CMYK is subtractive — inks absorb certain wavelengths of light and reflect others. Mixing all CMYK values at maximum produces black (in theory). In practice, a separate black ink (K = Key) is used for text and dark areas because mixing CMY inks produces a muddy brown, not a true black.

🌈 Color Theory for Designers

Color theory is the body of knowledge about how colors interact, how they are perceived and how they can be combined to create pleasing and effective visual designs. The color wheel, developed by Isaac Newton in 1666 and refined over the following centuries, is the fundamental tool of color theory.

The Color Wheel and Harmony Types

The color wheel arranges colors by hue from 0° to 360°. Different geometric relationships between colors on the wheel produce different types of harmony — predictable patterns of visual relationships that human perception finds balanced or pleasing.

• Complementary: Two colors directly opposite each other (180° apart). Creates maximum contrast and visual vibration. Best used with one dominant color and the other as an accent.
• Split-complementary: One color and the two colors on either side of its complement (150° and 210°). Less tension than direct complementary, but still high contrast.
• Triadic: Three colors equally spaced at 120° intervals. Vibrant and highly contrasted while maintaining color balance. Requires careful saturation management to avoid clashing.
• Analogous: Three to five colors adjacent on the wheel (within 30–60°). Creates cohesive, harmonious designs with little contrast. Often seen in nature — sunset colours, ocean colours.
• Tetradic (Square): Four colors at 90° intervals. Rich and complex. Works best when one color dominates and others serve as accents.

Tints, Shades and Tones

A tint is a hue mixed with white — lighter versions of the original color. A shade is a hue mixed with black — darker versions. A tone is a hue mixed with grey — more muted versions. Design systems typically define a 10-step scale of tints and shades for each brand color, giving designers a consistent vocabulary of light and dark variants for backgrounds, text and interactive states.

Tailwind CSS popularised this approach to color scales, defining 11 steps (50, 100, 200 through 900) for each color. This tool generates 10 tints and 10 shades for any color, suitable for creating your own design system scale.

♿ WCAG Accessibility and Contrast Ratios

Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C, define minimum standards for digital accessibility. For color and contrast, WCAG specifies the minimum contrast ratio between text color and background color required to ensure legibility for users with low vision or color vision deficiencies.

How Contrast Ratio is Calculated

WCAG contrast ratio uses the relative luminance of two colors: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance is calculated from linearised RGB values using the formula defined in the WCAG 2.1 specification. The maximum contrast ratio is 21:1 (black on white) and the minimum is 1:1 (identical colors).

Why Contrast Matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency (color blindness). A further 246 million people globally have moderate to severe visual impairment. Poor color contrast is one of the most common and most impactful accessibility failures — it affects a wide range of users and is entirely preventable with a simple contrast check before publishing.

Beyond accessibility compliance, good contrast improves the reading experience for all users, particularly in suboptimal viewing conditions such as bright sunlight, low-quality displays or at small text sizes.

Practical Contrast Guidance

• Always check contrast for body text, headings, interactive elements (buttons, links) and form labels.
• Check in both light and dark modes if your design supports both.
• Never rely on color alone to convey information — use icons, patterns or text labels alongside color cues.
• Placeholder text in form inputs often fails contrast requirements — ensure it meets at least 4.5:1 against the input background.
• Disabled elements are exempt from contrast requirements, but consider making them more readable anyway.

💻 Color in Web Design and CSS

CSS supports multiple color formats, and choosing the right one for different contexts makes your stylesheets more readable and maintainable.

When to Use HEX

HEX is the most compact format and is supported everywhere. Use HEX for static colors in design systems where readability of the color value itself matters less than brevity. HEX colors are easily recognisable to experienced developers — #FF0000 is immediately identifiable as red.

When to Use RGB/RGBA

Use rgba() when you need to specify opacity — rgba(0,0,0,0.5) is a semi-transparent black. This is the most common reason to prefer RGB over HEX in CSS.

When to Use HSL

HSL is the most human-friendly format for CSS. The intuitive relationship between hue, saturation and lightness makes it easy to create color scales programmatically. CSS custom properties (variables) defined in HSL allow you to adjust lightness and saturation mathematically: if your brand color is hsl(239, 86%, 66%), you can define hover states as hsl(239, 86%, 56%) — simply reducing lightness by 10 percentage points.

Modern CSS also supports color-mix() and relative color syntax, which work naturally with HSL values to create dynamic color systems in CSS alone.

CSS Custom Properties for Color Systems

Design systems benefit enormously from CSS custom properties (variables). Defining your full color scale as CSS variables in :root allows a single variable change to cascade through the entire design. The CSS Variables panel in this tool generates a complete :root block with your selected color and its full tint/shade scale.

💬 Frequently Asked Questions

🔧 Related Free Tools

DailyToolkitPro offers a full suite of free browser-based productivity tools.