web

Color Picker & Converter

Convert colors between HEX, RGB, and HSL with live preview, WCAG contrast hints, copy buttons, and browser eyedropper support.

Sample text on background

#2563EB

HEX

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

WCAG contrast

AA

Contrast ratio: 5.17:1

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text.

Foreground on background
Background on foreground

All conversions run locally in your browser. Eyedropper requires a Chromium-based browser with EyeDropper API support.

Color for Developers Course

Learn color models for UI work: HEX, RGB, HSL, WCAG contrast, CSS formats, and a practical picking workflow.

Course home

About this tool

DevCove Color Picker & Converter helps frontend and design developers translate colors between HEX, RGB, and HSL without leaving the browser. Pick a foreground swatch, paste CSS color strings, edit channel values, and copy ready-to-use CSS snippets. Compare text against a background color with a simplified WCAG contrast ratio and AA / AAA hints. When your browser supports the EyeDropper API, sample colors from anywhere on screen.

How to use this tool

Use this color converter when you need CSS-ready values for themes, components, or accessibility checks:

  1. Pick a foreground color with the native color input or paste a HEX / RGB / HSL string.
  2. Edit HEX, RGB, or HSL channel fields—values stay synchronized as you type.
  3. Set a background swatch to evaluate text contrast with simplified WCAG ratio hints.
  4. Copy individual formats or use Copy all formats for design handoff notes.
  5. Use Pick color when your browser supports the EyeDropper API to sample from the screen.
  6. Load presets such as DevCove blue, slate black, or success green for quick starting points.

Features

Built for everyday CSS and UI work rather than full design-system management:

  • Live synchronization between HEX, RGB, and HSL fields.
  • Foreground and background preview with sample text.
  • Simplified WCAG contrast ratio with AA / AAA / large-text hints.
  • Copy HEX, RGB, HSL, or bundled format output.
  • Paste parser for #hex, rgb(), rgba(), hsl(), and hsla() strings.
  • Preset swatches for common brand and semantic colors.
  • Browser EyeDropper support when available.
  • 100% client-side conversion—colors are not uploaded.
  • Complements HTML Entity Encoder, URL Encoder, and Regex Tester for frontend workflows.

FAQ

Which color formats are supported?

You can paste or edit HEX (#2563EB), rgb()/rgba(), and hsl()/hsla() values. Channel editors keep all three representations in sync.

How accurate is the WCAG contrast check?

DevCove calculates relative luminance and contrast ratio using the standard WCAG formula for sRGB colors. It is a quick hint for text pairs—not a substitute for auditing entire themes or non-text UI.

Why is the eyedropper button missing?

The EyeDropper API is available in Chromium-based desktop browsers. Safari and Firefox may hide the button until support is available.

Are my colors uploaded?

No. Parsing and conversion happen entirely in your browser.

Does alpha transparency affect contrast?

This tool evaluates opaque foreground and background RGB values. For translucent overlays, flatten colors against their intended backdrop before relying on the ratio.