Color Picker

Professional color picker with HSB canvas, 6 output formats, color harmonies, accessibility checking, and color blindness simulation.

Medium Orchid#A85BF5
Space

Formats

HEX#A85BF5
RGBrgb(168, 91, 245)
HSLhsl(270, 89%, 66%)
HSBhsb(270, 63%, 96%)
CMYKcmyk(31%, 63%, 0%, 4%)
HWBhwb(270 36% 4%)

Contrast

vs White
3.83:1 — AA Large
vs Black
5.48:1 — AA

Nearest Tailwind

Generate palette from this colorCheck contrast with this color

Color Harmonies

Tints & Shades

Tints (color → white)
Shades (color → black)

Color Blind Simulation

Frequently Asked Questions

What is a color picker used for?
A color picker lets you select any color visually and get its exact code in formats like HEX (#FF5733), RGB (255, 87, 51), HSL, HSB, CMYK, and HWB. Designers and developers use it to find precise colors for websites, apps, logos, and digital art.
What is the difference between HSB and HSL?
HSB (Hue, Saturation, Brightness) and HSL (Hue, Saturation, Lightness) are both ways to describe color, but HSB is more intuitive for designers. In HSB, 100% brightness with 100% saturation gives you the pure hue. HSB is the model used by Photoshop, Figma, and Sketch. Kulr supports both formats.
How do I pick a color from my screen?
Kulr integrates the EyeDropper API (available in Chrome and Edge) that lets you click anywhere on your screen to pick a color. Click the Eyedropper button, then click any pixel on your screen. The color code is captured instantly in all 6 formats.
What are color harmonies?
Color harmonies are combinations of colors that look visually pleasing together, based on their positions on the color wheel. Kulr generates 5 harmony types: complementary, analogous, triadic, split-complementary, and tetradic — all visualized on an interactive color wheel.

Professional Online Color Picker

Kulr's color picker uses the HSB (Hue, Saturation, Brightness) model — the same color model used by Photoshop, Figma, and Sketch. This gives designers intuitive control: drag right for more saturation, drag up for more brightness. It's how professional tools work.

Get your color in six formats instantly: HEX, RGB, HSL, HSB, CMYK (for print), and HWB. Every format is one click to copy. The harmony panel visualizes complementary, analogous, triadic, split-complementary, and tetradic relationships on an interactive color wheel.

Check accessibility with built-in WCAG contrast ratios against white and black backgrounds. See how your color appears to people with color vision deficiencies — protanopia, deuteranopia, tritanopia, and achromatopsia. Find the nearest Tailwind CSS utility class automatically.

The EyeDropper tool (Chrome/Edge) lets you pick any color from your screen — from other websites, desktop apps, or images. Everything runs in your browser. No data leaves your device.

Related Tools

Browse named colors →Convert color formats →Generate palettes →Check contrast ratios →Color psychology guide →Tailwind CSS colors →