Color Picker & Palette Generator

Understanding Color Models: RGB, HSL, HSV, and CMYK

Color models are mathematical systems for representing colors as numbers. Different models serve different purposes. RGB (Red, Green, Blue) is the foundation of digital color — every pixel on your screen is a combination of these three light channels, each ranging from 0 to 255. When all three are at maximum (255, 255, 255), you get white. When all are zero, you get black.

HSL (Hue, Saturation, Lightness) is more intuitive for human color selection. Hue represents the color wheel position (0–360°), saturation controls color intensity (0% = gray, 100% = vivid), and lightness controls brightness (0% = black, 50% = pure color, 100% = white). HSV (Hue, Saturation, Value) is similar but uses "Value" instead of "Lightness," which behaves differently — HSV is commonly used in design software.

CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print. Unlike RGB's additive model (adding light), CMYK is subtractive (adding ink absorbs light). This is why colors often look different when printed — the CMYK gamut is smaller than RGB.

HEX Color Codes Explained

HEX codes are simply RGB values written in hexadecimal (base-16). The code #FF5733 breaks down as: FF = 255 red, 57 = 87 green, 33 = 51 blue. Hexadecimal uses digits 0–9 and letters A–F to represent values 0–255 in just two characters. Shorthand notation (#F00 for #FF0000) works when both digits in each pair are identical.

Color Theory Basics

Color theory provides frameworks for combining colors harmoniously. Complementary colors sit opposite each other on the color wheel, creating high contrast. Analogous colors are adjacent, producing harmonious blends. Triadic schemes use three equidistant colors for vibrant balance. Split-complementary uses a base color plus two colors adjacent to its complement, offering contrast with less tension.

WCAG Color Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text. These ratios ensure readability for users with visual impairments. Our tool calculates contrast ratios against both white and black backgrounds automatically.

Color Psychology in Web Design

Colors evoke psychological responses. Blue conveys trust and professionalism (used by banks, tech companies). Red creates urgency (sales, alerts). Green represents growth and health. Yellow catches attention. Purple suggests luxury. Understanding these associations helps designers choose palettes that align with brand messaging and user expectations.

Building a Design System Palette

A robust design system palette typically includes a primary brand color, secondary accent colors, neutral grays for text and backgrounds, and semantic colors for success, warning, error, and info states. Each color should have a scale of shades (50–950) for flexibility. CSS custom properties or Tailwind configuration files make palette management systematic across large projects.