Color Picker
Explore, tune, and extract precision colors with an interactive 2D spectrum canvas, hue and alpha sliders, live eyedropper, harmony schemes, and instant conversions across HEX, RGB, HSL, HSV, OKLCH, and CMYK.
Azure Blue
#2A6AF5Live UI Preview
Test how this color renders on real web components
Headline Typography
Body copy with high readability score.
Tailwind Palette (50 – 950)
11-step scale ready for Tailwind CSS and theme configurations
Color Harmonies
Balanced palette combinations from the 360° color wheel
Azure Blue
#2A6AF5
Marigold
#F5B429
Color Formats & Exact Inputs
Precision synchronized values for web tokens, CSS, and print
How to Use the Chromik Color Picker
Pick & Fine-Tune
Drag the 2D cursor across the saturation and brightness plane, glide through the 360° hue spectrum, adjust opacity, or use the Eyedropper to sample any pixel on your screen.
Harmonize & Export
Inspect complementary, analogous, and triadic harmonies, verify WCAG 2.1 contrast compliance, and copy or export directly to Tailwind CSS, Figma, or CSS custom variables.
Understanding Digital Color Formats
HEX is the web standard base-16 representation of Red, Green, and Blue channels (00-FF), while RGB expresses values as integers from 0 to 255.
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) represent color as a cylindrical coordinate system, making it intuitive to adjust brightness and purity.
OKLCH delivers uniform perceived brightness across hues. A lightness of 0.7 looks identically bright whether the color is deep blue, vibrant yellow, or vivid magenta.
Subtractive color model used in four-color commercial printing (Cyan, Magenta, Yellow, Key/Black). Perfect for brand identity print specifications.
Frequently Asked Questions
How does the screen Eyedropper tool work?▼
The Eyedropper uses the native Chromium EyeDropper Web API. When clicked, it turns your cursor into a precision magnifying loupe, letting you sample any pixel from your browser window or entire operating system desktop.
What is WCAG 2.1 color contrast and why does it matter?▼
The Web Content Accessibility Guidelines (WCAG) specify minimum luminance contrast ratios between text and its background. Level AA requires at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text.
Can I export generated color harmonies into Tailwind CSS?▼
Yes! Clicking the "Export" button opens the Export Modal where you can instantly generate ready-to-paste configurations for Tailwind CSS v4 (@theme tokens), Tailwind CSS v3 (theme.extend.colors), Figma design tokens, and native CSS custom properties.
What is the difference between shades, tints, and tones?▼
In color theory, tints are created by adding white to a pure hue (increasing lightness), shades are created by adding black (decreasing lightness), and tones are created by adding pure gray (modulating saturation while preserving perceived balance).