HEX is a six- or eight-digit base-16 code representing red, green, and blue channels: #RRGGBB or #RRGGBBAA (with alpha). It’s human-readable, copy-paste friendly, and works everywhere in CSS and design tools.
Here is a list of Shades and Tints of your selected color. Shades add pure black in 10% steps; tints add pure white in 10% steps. Click any swatch to copy its HEX code.
Complementary colors sit opposite each other on the color wheel. Use the pair to create strong contrast.
Evaluate the contrast between the “Text Color” and your chosen “Background Color”. Adjust the values for a better color combination that ensures optimal readability and usability!
WCAG thresholds: AA (normal) 4.5:1, AAA (normal) 7:1. For large text (≥18pt or bold ≥14pt): AA 3:1, AAA 4.5:1.
Easily pick color from an image or the color wheel. Hover and click any pixel to sample the exact shade.
Grab colors in HEX/HTML, RGB, HSL, HSV, or CMYK. Copy-ready codes for design, web, or print.
Create perfect palettes using Complementary, Triadic, Tetradic, Analogous, and Monochromatic schemes.
Everything runs in your browser—no image uploads, tracking, or server storage. Your work stays local.
Works on Windows, macOS, Linux, and mobile—right inside your browser. No installs needed.
Use the color picker without sign-ups or fees. Fast, reliable, and always free.
Everything you need to know about colors, formats, palettes, accessibility, and getting production-ready results.
HEX is a six- or eight-digit base-16 code representing red, green, and blue channels: #RRGGBB or #RRGGBBAA (with alpha). It’s human-readable, copy-paste friendly, and works everywhere in CSS and design tools.
Screens use additive RGB light (sRGB gamut), while printers mix subtractive CMYK inks. Device calibration, viewing conditions, and color profiles cause variation. For consistent results, design in sRGB, proof with a calibrated display, and get a CMYK proof from your printer.
Warm (reds, oranges, yellows) feel energetic and draw attention. Cool (blues, greens) feel calm and trustworthy. Use warm hues for accents and CTAs; use cool hues for surfaces and information-heavy screens.
Saturation is color intensity (gray ↔ vivid). Lightness is brightness (black ↔ white). Lower saturation yields professional, muted UIs; adjusting lightness creates hierarchy and depth without changing the hue.
Use rgba() or hsla() with an alpha channel (0–1). Modern CSS also supports #RRGGBBAA. HSL/HSLA is easier for theming; HEX-8 is compact for tokens.
A practical system has 1–2 brand hues, 1 accent, success/warning/error states, and a neutral gray scale (8–10 steps). Keep roles clear (primary, surface, border, text) and verify contrast for each usage.