Color Code Generator

Pick a color and instantly see HEX, RGB, and HSL codes — plus complementary color and CSS color name.

Instant result Runs in browser
HEX Code
#3D7EF7
RGB Values
rgb(61, 126, 247)
HSL Values
hsl(218, 91%, 60%)
Color Name
—
Complementary
#F7823D

Color Model Guide

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX is compact for CSS. RGB maps to screen pixels. HSL is intuitive for designers — adjust hue, saturation, and lightness independently.

How to use?

  1. 1
    Pick a colorClick the color picker and choose any color. All format codes update instantly.
  2. 2
    View all formatsSee the HEX code, RGB values, HSL values, CSS color name (if available), and complementary color simultaneously.
  3. 3
    Copy your codeClick the copy button next to HEX, RGB, or HSL to save the value to your clipboard for CSS or design tools.

FAQ

What is a HEX color code?
A HEX color code is a 6-digit hexadecimal number (#RRGGBB) representing red, green, and blue channel intensities. Each pair ranges from 00 (none) to FF (full = 255). HEX supports 16.7 million colors (256³) and is the standard format for CSS and web design tools.
What is the difference between RGB and HSL?
RGB describes color as three light intensities (red, green, blue) 0–255, matching how monitors work. HSL uses hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is more intuitive for designers — change hue to shift color family, saturation for vibrancy, lightness for brightness.
What is a complementary color?
A complementary color sits exactly opposite on the color wheel (180° apart in hue). Complementary pairs create maximum contrast: Red ↔ Cyan, Green ↔ Magenta, Blue ↔ Yellow. Widely used in design to make elements stand out.

Understanding Web Color Models

Color on the web is represented through three primary models: HEX (hexadecimal), RGB (Red-Green-Blue), and HSL (Hue-Saturation-Lightness). Each serves different purposes in CSS, web design, and color theory. This tool converts instantly between all three and also identifies CSS named colors and complementary hues.

HEX Color Codes

HEX is the most common color format in web development. Written as #RRGGBB, each hex pair represents a color channel intensity from 00 to FF (0–255). With 256 values per channel, HEX supports 16,777,216 colors (256³). A 3-digit shorthand exists: #RGB expands to #RRGGBB (e.g., #F06 = #FF0066). HEX is used everywhere: CSS (color: #FF5733;), HTML, Figma, Photoshop, and brand guidelines.

RGB Color Model

RGB is the additive color model of digital displays. Values range 0–255 per channel. rgb(255, 0, 0) = red, rgb(0, 255, 0) = green, rgb(128, 128, 128) = gray. CSS supports rgb() and rgba() (with alpha transparency 0–1). RGB maps directly to how monitors emit light through red, green, and blue sub-pixels.

HSL Color Model

HSL is more intuitive for designers. Hue (0–360°): color type on the wheel — 0°=red, 60°=yellow, 120°=green, 180°=cyan, 240°=blue, 300°=magenta. Saturation (0–100%): color intensity — 0%=gray, 100%=vivid. Lightness (0–100%): brightness — 0%=black, 50%=normal, 100%=white. Creating tints and shades is trivial in HSL: keep hue and saturation constant, vary lightness.

Complementary Colors

Complementary colors sit 180° apart on the color wheel, creating maximum contrast. Pairs: Red ↔ Cyan, Green ↔ Magenta, Blue ↔ Yellow. Essential for high-contrast UI design, call-to-action buttons, and data visualization.

Web Accessibility

About 8% of men and 0.5% of women have color vision deficiency. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Never convey information through color alone.

CSS Named Colors

CSS defines 148 named colors (red, navy, coral, teal, etc.). This tool identifies named colors automatically. Named colors improve CSS readability but cover only a small fraction of the 16.7 million possible colors.

Privacy

All color calculations run entirely in your browser. No data is sent to any server.

Comments