Color Picker / Converter
Pick colors and convert between HEX, RGB, and HSL formats. Check WCAG contrast ratios, generate shades, and get CSS values.
Click the preview to open the native color picker
Contrast Ratios (WCAG)
White Text
3.68:1
AA Large Only
Black Text
5.71:1
AA Pass
Shades
Preset Colors
CSS Values
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
--color-primary: #3B82F6;
bg-[#3B82F6] text-[#3B82F6]
About Color Picker
This color picker lets you convert between HEX, RGB, and HSL color formats. It calculates WCAG contrast ratios against black and white backgrounds, generates shade variations, and provides ready-to-use CSS values.
All processing happens locally in your browser. No data is sent to any server.
How to Use This Color Picker
This free online color picker and converter makes it easy to work with colors in any format. Whether you are designing a website, checking accessibility compliance, or creating a color palette, follow these steps:
- Select a color by clicking the color preview to open the native color picker, entering a HEX value, adjusting RGB sliders, or clicking a preset color.
- Copy color values in HEX, RGB, or HSL format using the copy buttons next to each value.
- Check accessibility — review the WCAG contrast ratios against black and white to ensure your color meets accessibility standards.
- Generate shades — use the shade strip to find lighter or darker variations of your color for consistent design palettes.
Everything runs locally in your browser. No data is sent to any server.
Common Use Cases
- Web design — Convert brand colors between HEX, RGB, and HSL for CSS stylesheets.
- Accessibility testing — Check if text color meets WCAG AA or AAA contrast requirements against backgrounds.
- Design systems — Generate consistent shade scales for primary, secondary, and accent colors.
- Tailwind CSS — Get arbitrary color values for Tailwind utility classes like bg-[#hex] and text-[#hex].
- Brand consistency — Quickly convert colors between formats for different design tools and platforms.
Related Tools
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a 6-digit hexadecimal representation of color (e.g., #3B82F6). RGB defines color using Red, Green, and Blue values from 0-255 (e.g., rgb(59, 130, 246)). HSL uses Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%) which is more intuitive for adjusting colors (e.g., hsl(217, 91%, 60%)).
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between foreground and background colors. The minimum ratio for normal text is 4.5:1 (AA level) and 7:1 for enhanced contrast (AAA level). Large text requires a minimum of 3:1.
How do I pick a color from my screen?
Click the large color preview area to open your browser's native color picker. On most modern browsers, this includes an eyedropper tool that lets you pick any color visible on your screen.
What color format should I use in CSS?
HEX is the most common format in CSS and is supported everywhere. RGB is useful when you need alpha transparency (rgba). HSL is the most developer-friendly for creating color variations, as you can easily adjust lightness and saturation while keeping the same hue.
How do I generate color shades for a design system?
Select your base color using the picker or by entering a HEX value. The tool automatically generates 9 shades from lightest to darkest by varying the lightness value in HSL. Click any shade to use it as your new base color.
Related Tools & Guides
Try Also
ABI Encoder / Decoder
Encode and decode Ethereum ABI data. Input function signatures and parameters to generate calldata.
ETH Unit Converter
Convert between Ethereum units: Wei, Gwei, and ETH. Essential for gas and transaction calculations.
Unix Timestamp Converter
Convert between Unix timestamps and human-readable dates. Includes notable Ethereum timestamps and relative time display.