Color converter
WebPicker + hex, RGB, HSL, HSV, HWB, CMYK, OKLCh, CSS names, WCAG contrast.
What this tool helps with
Color spaces describe the same color differently: hex/RGB for the web, HSL/HSV for pickers, CMYK for print, and OKLCh for perceptually uniform adjustments. This converter shows a color across all of them at once and computes the WCAG contrast ratio against black and white so you can check accessibility while you tweak. It is a client-side picker — no account, no network — so it slots into a design workflow without friction.
How to use Color converter
- Open the Color converter page and paste, type, or generate the color input you want to work with.
- Pick the options you need so the tool can picker + hex, RGB, HSL, HSV, HWB, CMYK, OKLCh, CSS names, WCAG contrast
- Copy the hex result with one click and use it in your next step — terminal, editor, ticket, or anywhere else you need it.
Common uses
- Reach for Color converter when you need to picker + hex, RGB, HSL, HSV, HWB, CMYK, OKLCh, CSS names, WCAG contrast during debugging, code review, or content preparation.
- Skip installing a desktop color app — open this web utility on a shared machine, an iPad, or a colleague's laptop and it just works.
- Bookmark or share the page when you and your team keep coming back to the same color, hex, rgb, and hsl workflow.
FAQ
What WCAG contrast ratio do I need?
4.5:1 for normal body text and 3:1 for large text (roughly 18.66px bold or 24px regular) to meet WCAG AA. AAA asks for 7:1. The tool shows the ratio so you can see which bar you clear.
Why use OKLCh instead of HSL?
HSL lightness is not perceptually uniform — two colors with the same L can look very different in brightness. OKLCh is designed so equal lightness looks equally light, which makes generating accessible palettes far more predictable.
Is hex or RGB more correct?
They are the same sRGB color, just different notation. #ff8800 and rgb(255,136,0) are identical. Hex is compact; RGB is easier to compute with.