How do I convert RGB to HEX?

In the Color Converter tab, enter R, G, B values in the RGB fields. The HEX code and all other formats update instantly.

How do I generate a color palette online?

Use the Palette Generator tab. Pick a base color, select a harmony scheme (analogous, complementary, triadic, etc.), choose a palette size, and click Generate. Lock colors you want to keep and regenerate the rest.

What is the WCAG contrast ratio requirement?

WCAG 2.1 Level AA (the standard minimum for most websites) requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ regular or 14px+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

How do I check color contrast for accessibility?

Use the Contrast Checker tab. Enter your foreground (text) color and background color, set the font size and weight, and the tool calculates the contrast ratio and shows whether it passes WCAG AA and AAA standards.

How do I generate a CSS gradient?

Use the Gradient Generator tab. Choose linear, radial, or conic, set the angle, add color stops with the color pickers and position sliders, and copy the CSS rule directly. The preview updates live.

What is HSL color format?

HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It is the most human-intuitive color format — you can adjust brightness and vividness independently without changing the hue. It is fully supported in CSS.

What is CMYK and when should I use it?

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in print design and physical printing. If you are preparing files for a print shop, you will need CMYK values.

How do I find the nearest Tailwind CSS color?

The Color Picker and Color Converter tabs both display the nearest Tailwind CSS color utility class (e.g., blue-500, rose-400) for any color you enter or pick. The match is approximate — Tailwind has a fixed palette.

How do I use a web HEX color in Swift / iOS?

The Color Converter tab outputs the UIColor(red:green:blue:alpha:) format for any color. Copy it directly into your Swift/Objective-C code.

How do I use a color in Flutter / Dart?

The Color Converter tab outputs the Flutter Color(0xFFRRGGBB) syntax for any color, ready to paste into your Dart widget code.

What is color blindness and how does the simulator work?

Color blindness affects approximately 8% of males and 0.5% of females. The simulator uses transformation matrices to approximate how colors appear with Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (complete color blindness). Use it to ensure your designs are accessible.

Home›Color Picker & Palette Generator

Color Picker & Palette Generator

Pick colors, generate palettes, extract colors from images, build gradients, check WCAG contrast, convert between every color format — HEX, RGB, HSL, CMYK, HSV, Tailwind, CSS, Swift, Flutter and more. Free, instant, 100% in your browser.

#E8720C

Pick a color

R232

G114

B12

H28°

S90%

L48%

All Color Formats

HEX

#E8720C

RGB

rgb(232, 114, 12)

HSL

hsl(28, 90%, 48%)

HSV

hsv(28, 95%, 91%)

CMYK

cmyk(0%, 51%, 95%, 9%)

CSS Var

--color: #E8720C;

Tailwind

text-orange-500

Named

Chocolate

Color Properties

Luminance

0.292

Brightness

Light

Hex (no #)

E8720C

R (0–1)

0.910

G (0–1)

0.447

B (0–1)

0.047

Color Blindness Simulator

Original

Select a color blindness type to see how the color appears. Approximately 8% of males and 0.5% of females have some form of color vision deficiency.

Free Online Color Picker, Palette Generator & Color Converter

This free color tool is everything you need for working with color on the web, in design, and in development — all running instantly in your browser with nothing uploaded. Pick any color, generate complete palettes using color theory, extract dominant colors from images, build CSS gradients, check WCAG accessibility contrast ratios, and convert between every major color format.

Everything This Tool Does

Color Picker — Native color wheel, RGB & HSL sliders, HEX input. Displays all formats simultaneously including Tailwind CSS, CMYK, HSV, and color blindness simulation.
Palette Generator — Generate complementary, analogous, triadic, split-complementary, tetradic, monochromatic, shades, tints, or random palettes from any base color. Lock specific colors and regenerate the rest.
Extract Colors from Image — Upload any image and automatically extract the dominant color palette (4–12 colors) using color quantization. Entirely client-side.
CSS Gradient Generator — Build linear, radial, and conic gradients with multiple color stops. Preview live and copy the CSS rule instantly.
WCAG Contrast Checker — Check foreground/background contrast ratios against WCAG 2.1 AA and AAA standards for normal and large text. Required for web accessibility compliance.
Color Format Converter — Convert HEX to RGB, RGB to HSL, HEX to CMYK, and to 17+ output formats including iOS/Swift, Android/ARGB, Flutter, Figma, and Tailwind CSS.
Color Blindness Simulator — Preview colors as seen with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.

Who Uses This Tool?

Web designers pick brand colors and check accessibility compliance before coding. Frontend developers convert design tokens between HEX, RGB, and HSL for CSS variables. Mobile developers convert web hex colors to Swift UIColor or Flutter Color syntax. UX designers generate color palettes and test color blindness accessibility. Brand designers extract primary and secondary brand colors from logos. Content creators build cohesive Instagram and presentation color schemes.

Frequently Asked Questions

How do I convert HEX to RGB?

Use the Color Converter tab. Enter your HEX code and all formats — RGB, HSL, CMYK, HSV — are shown instantly with one-click copy buttons.

What is a complementary color?

A complementary color is the color directly opposite on the color wheel — 180° away in hue. Complementary pairs create maximum contrast and visual tension, making them ideal for call-to-action buttons and highlight accents.

What WCAG contrast ratio do I need?

WCAG 2.1 AA (the standard for most websites) requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text.

How do I extract colors from an image?

Click the Extract from Image tab, upload any image (JPG, PNG, WebP), and the tool automatically identifies the most dominant colors using color quantization. Your image is processed locally — never uploaded.

How do I convert a color to Tailwind CSS?

The Color Picker and Color Converter tabs both show the nearest Tailwind CSS color class (e.g., "blue-500") for any color you enter. Use it as a starting point — Tailwind classes are approximations.

How do I use a hex color in Swift / iOS?

The Color Converter tab provides the UIColor(red:green:blue:alpha:) format for any color, ready to paste into your Swift code.

What is HSL vs RGB vs HEX?

HEX is the web standard — a 6-digit hexadecimal code like #FF5733. RGB (Red Green Blue, each 0–255) is how screens actually display color. HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%) is the most human-intuitive format, making it easy to adjust brightness and vividness without changing the hue.

Is this color tool free?

Yes — completely free with no signup, no ads, and no limits. All processing runs locally in your browser.