NitroClawAll Tools

Color Picker

A free online color picker that lets you select colors visually and convert between HEX, RGB, HSL, and CMYK formats instantly. Generate color harmonies, get CSS code snippets, and check WCAG contrast ratios.

Pick a Color

HEX

RGB

HSL

CMYK

Color Harmonies

Complementary
Triadic
Analogous
Split-Complementary

CSS Code

color: #3B82F6;
background-color: #3B82F6;
--brand-color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);

Contrast Ratio (WCAG)

Aa
vs White (3.68:1)
AA FailAAA FailAA Large Pass
Aa
vs Black (5.71:1)
AA PassAAA FailAA Large Pass

Frequently Asked Questions

What is a color picker?

A color picker is a visual tool that lets you select colors by clicking on a palette or entering values in different color formats like HEX, RGB, HSL, or CMYK. It converts between formats automatically and helps designers and developers find the exact color they need for their projects.

How do I convert HEX to RGB?

To convert HEX to RGB, split the six-character hex code into three pairs (red, green, blue) and convert each pair from hexadecimal to decimal. For example, #FF6B35 becomes R:255, G:107, B:53. Our color picker does this conversion instantly as you type or pick a color.

What are color harmonies?

Color harmonies are combinations of colors that look visually pleasing together, based on their positions on the color wheel. Common harmonies include complementary (opposite colors), triadic (three equally spaced colors), analogous (adjacent colors), and split-complementary (a color plus the two colors adjacent to its complement).

What is WCAG contrast ratio?

WCAG contrast ratio measures the difference in luminance between two colors, expressed as a ratio like 4.5:1. The Web Content Accessibility Guidelines require a minimum ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA). This ensures text is readable for people with visual impairments.

How do I use colors in CSS?

CSS supports multiple color formats: HEX (#FF6B35), RGB (rgb(255, 107, 53)), HSL (hsl(20, 100%, 60%)), and named colors. You can apply colors using properties like color for text, background-color for backgrounds, and CSS custom properties (--my-color) let you reuse colors across your stylesheet.

Related Tools

Color Contrast CheckerCSS Gradient Generator

Built by NitroClaw - modern developer tools

Learn more about NitroClaw→