Color Utility
Convert HEX, RGB, HSL colors and check WCAG contrast ratio for accessibility.
Color Conversion
Contrast Checker (WCAG)
The quick brown fox jumps over the lazy dog.
Color Converter and Contrast Checker
Design and frontend work often moves between HEX, RGB, and HSL color formats. This tool converts color values and helps check contrast between foreground and background colors so UI text and controls remain readable.
Common use cases
- Convert CSS colors: Move between HEX, RGB, and HSL when implementing designs.
- Check readability: Compare text and background colors before shipping UI changes.
- Create color variations: Use HSL to adjust lightness or saturation for hover states, borders, and subtle backgrounds.
Accessibility note
Color contrast affects readability, especially on mobile screens and bright displays. Do not rely on color alone to communicate state; combine color with text, icons, labels, or layout cues.
Articles for this tool
Recent Articles
Use a SQL formatter before review to make queries easier to read
A practical workflow for formatting long SQL queries so JOIN, WHERE, GROUP BY, and ORDER BY clauses are easier to review.
Visualize GitHub Actions needs dependencies with Mermaid
A practical workflow for reading complex GitHub Actions workflow YAML by separating job dependencies from step details.
Common pitfalls when drawing infrastructure diagrams with Mermaid
A practical guide to organizing node names, arrows, and diagram scope when building infrastructure diagrams with Mermaid in the browser.
Generate Mermaid ER diagrams from SQL DDL to review table relationships
A practical workflow for turning CREATE TABLE statements into Mermaid ER diagrams and checking foreign keys before a schema review.
Design notes for building JOIN queries with a Visual SQL Builder
A practical workflow for using a Visual SQL Builder to assemble SELECT, JOIN, and WHERE clauses without losing track of table relationships.
Convert CSV and JSON to check data faster
A practical workflow for moving between CSV exports, API responses, and spreadsheet-style review without losing track of fields.