Colour converter

Color Converter

Paste a colour in any CSS notation to get it in all the others, with a swatch, its CSS name and how well it reads on white and black.

How do I use the Colour converter?

1. Paste colours, one per line: #ff8800, rgb(255 136 0), hsl(32 100% 50%), oklch(75% 0.18 60) or tomato.
2. Read every notation for each.
3. Check its contrast before using it for text.

What does the Colour converter do?

• HEX with alpha, rgb(), hsl(), hwb(), oklch() and oklab()
• All 148 CSS colour names
• Old comma syntax and the new space syntax, with / alpha
• WCAG 2 contrast with white and black, with the AA and AAA levels
• Out-of-gamut OKLCH clipped to the nearest sRGB colour
• Copy gives them all as JSON

Frequently asked questions

Is my data uploaded?

No. Bracely runs entirely in your browser, so nothing you paste or open leaves your device.

More JSON tools

Bracely has more than 65 JSON tools in one page. Related ones:

• ENV ⇄ JSON
• cURL to code
• GraphQL request
• MessagePack ⇄ JSON
• Parquet viewer
• Avro viewer
• JSON to YAML
• JSON to CSV
• JSON to XML
• JSON to Excel
• YAML to JSON
• CSV to JSON
• XML to JSON
• JSON to TOML
• OpenAPI from JSON
• JSON to ER diagram
• Merge JSON
• Flatten JSON
• JSON Formatter
• JSON Validator
• JSON Viewer
• JSON Repair
• JSON Diff
• jq Playground

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut. About · Privacy policy
Last updated 22 October 2026 · Version 4.9 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram