copy a color
analogous
HEX Color Picker & Converter Studio
Inspect, convert, and build design tokens with SetHue’s precision color picker. Features an interactive 2D saturation/brightness canvas, screen eyedropper, instant HEX/RGB/HSL/CMYK conversions, tints, shades, and WCAG accessibility contrast scores.
Interactive Visual Picker
Live 2D CanvasDrag the cursor across the color space or adjust the sliders below.
Hue Spectrum (239°)239°
Opacity (100%)100%
Quick Palettes & PresetsClick to apply
Indigo#6366F2
#6366F2
#
Color Conversions
WCAG Accessibility RatioReadability Score
On White (#FFF)4.5:1
Large text
On Black (#000)4.7:1
Passes AA
Open in SetHue Tools
Tints & Shades Scale for #6366F2
Tints are created by adding white; shades are created by adding black. Click any shade to inspect it.
Tints (Lightness Mix)
Shades (Darkness Mix)
Color Harmonies Generated from #6366F2
Classical chromatic pairings rooted in the color wheel. Click any swatch to load it into the picker.
ComplementaryOpen in Generator →
AnalogousOpen in Generator →
TriadicOpen in Generator →
Split ComplementaryOpen in Generator →
TetradicOpen in Generator →
Mastering Digital Color Models in UI/UX Design
Modern digital interfaces rely on harmonizing color spaces across design tools (Figma, Sketch) and frontend frameworks (Tailwind, CSS Variables). Understanding when to use each format streamlines workflow efficiency.
🎯
HEX for Web & CSS
Hexadecimal notation (#RRGGBB) is the industry standard for HTML/CSS tokens. It offers a compact, copyable signature compatible across browsers, SVG assets, and design files.
🌈
HSL for Design Systems
Hue-Saturation-Lightness makes creating algorithmic color palettes intuitive. You can generate harmonious shades and dark mode tokens simply by modulating the Lightness percentage while preserving Hue.
♿
WCAG Accessibility
Never design interfaces blindly. Always verify that text colors achieve at least a 4.5:1 contrast ratio over background surfaces to pass WCAG 2.1 AA requirements for users with visual impairments.
Frequently Asked Questions
Common questions about color formats, conversions, and digital color theory.
What is a HEX color code and how does it work?
A HEX color code is a six-digit hexadecimal representation of an RGB color (Red, Green, Blue). The first two digits represent the red channel (00 to FF), the middle two represent green, and the final two represent blue. For instance, #6366F1 represents red: 99, green: 102, blue: 241.
What is the difference between HEX, RGB, and HSL?
HEX is a compact hexadecimal format (#RRGGBB) favored in CSS and digital design. RGB specifies color intensity as decimal values from 0 to 255. HSL describes color through human-intuitive parameters: Hue (0° to 360° on the color wheel), Saturation (color intensity 0% to 100%), and Lightness (0% black to 100% white).
How does the browser Eyedropper tool work?
The Eyedropper button utilizes the native browser EyeDropper API (supported in Chromium-based browsers like Google Chrome, Microsoft Edge, and Opera). It allows you to sample any pixel directly from your display, screen, or open documents and load it into SetHue instantly.
What are Tints and Shades in color theory?
Tints are created by blending a base hue with pure white (#FFFFFF), increasing lightness while preserving chromatic character. Shades are created by blending a base hue with pure black (#000000), reducing brightness. Designers use tints and shades to build coherent UI component hierarchies, hover states, and card surfaces.
How does SetHue evaluate WCAG accessibility contrast?
SetHue calculates optical luminance using the official W3C WCAG 2.1 algorithm. Normal body text requires a minimum contrast ratio of 4.5:1 to pass AA, while large text (18pt+ or 14pt bold) requires 3.0:1. The tool evaluates your picked color against both white (#FFFFFF) and black (#000000) backgrounds in real time.
Explore Curated Color Palettes
Browse hundreds of hand-tuned harmonic palettes for your next project.
copy a color
monochromatic
copy a color
triadic
copy a color
analogous