Skip to content
DevToolKits.app
Design

Color Utility

Convert HEX, RGB, HSL colors and check WCAG contrast ratio for accessibility.

Guide: How to use & features

  • Enter a color as HEX, RGB, or HSL to see the other formats instantly.
  • Set foreground and background colors to view the contrast ratio and WCAG status.
  • Use the preview text to judge readability and adjust colors as needed.
  • Copy outputs directly into design tools or CSS files.

Samples: Sample input & output

HEX から RGB/HSL に変換

Input

#1d4ed8

Output

RGB: rgb(29, 78, 216)
HSL: hsl(221, 76%, 48%)

FAQ: FAQ

  • When should I use HEX, RGB, or HSL?

    HEX (#1a2b3c) is widely used in CSS and design tools; RGB uses red/green/blue values and handles transparency (RGBA) easily; HSL uses hue, saturation, and lightness, making "a bit lighter" or "a bit more vivid" adjustments intuitive. This tool converts between them so you can pick whichever fits the task.

  • What WCAG contrast ratio counts as passing?

    Normal-size text passes AA at a contrast ratio of 4.5:1 or higher and AAA at 7:1 or higher. Large text (roughly 18pt+, or 14pt+ bold) passes AA at 3:1. Use the contrast checker to measure the ratio between foreground and background and judge whether it meets the threshold.

  • Can it handle colors with transparency (alpha)?

    Yes — notations like RGBA and HSLA express semi-transparent colors with an alpha value. Note, though, that contrast depends on how a color actually appears over its background, so check a semi-transparent text color using its composited result against the background for accuracy.

Use cases: Common use cases

  • Convert design colors to CSS formats

    Transform HEX values into RGB/HSL for style guides or CSS variables.

  • Check contrast compliance

    Verify foreground/background pairs against WCAG contrast requirements.

  • Tune palettes and share values

    Preview readability, tweak colors, and share codes with your team.

Notes: Notes & limitations

  • Work stays in your browser

    Inputs and outputs remain local. Closing the tab or clearing cache will remove any temporary state.

  • Validate critical data

    Results are helper outputs—double-check them before sending to production systems or sharing externally.

  • Large payloads depend on your device

    Very large text or files can feel slow in some browsers. Use a desktop environment for heavy workloads.

Color Conversion

HEX
#007BFF
RGB
rgb(0, 123, 255)
HSL
hsl(211, 100%, 50%)

Contrast Checker (WCAG)

Contrast Ratio 21.00
Normal Text
AA (4.5:1)
AAA (7.0:1)
Large Text
AA (3.0:1)
AAA (4.5:1)
Preview

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

Introduction
2026-05-09

How to Convert HEX, RGB, and HSL Colors and Check Contrast

Convert CSS color formats, adjust colors with HSL, and check foreground/background contrast for readable UI design.

Recent Articles

Use Case
2026-08-04

CREATE TABLE Reference: MySQL vs PostgreSQL vs SQLite Types & Constraints

A cross-database CREATE TABLE (DDL) reference with cheat sheets for data types, auto-increment keys (AUTO_INCREMENT / IDENTITY / rowid), foreign key ON DELETE behavior, and the CHECK constraint that MySQL silently ignores.

Introduction
2026-08-03

How CREATE TABLE Generation From a Visual Table Design Works | DDL Builder

A look inside DDL Builder, which turns a visually designed table into CREATE TABLE statements and an ER diagram. Covers the MySQL/PostgreSQL/SQLite type-mapping rules and the column-inference algorithm used for JSON samples.

Use Case
2026-07-21

GitHub Actions needs Design Patterns: Speed Up CI, Avoid the Anti-Patterns

A pattern reference for GitHub Actions job dependencies (needs). Covers diamond-shaped fan-out, concurrency cancellation, fail-fast tradeoffs, matrix-plus-needs gotchas, and reusable workflows, with copy-paste YAML examples.

Use Case
2026-07-21

SQL JOIN Types: Complete Reference to INNER, LEFT, RIGHT & FULL

A reference for SQL JOIN types (INNER/LEFT/RIGHT/FULL/CROSS/SELF) with a cheat sheet and row-count walkthroughs. Covers why one-to-many joins duplicate rows, the WHERE-vs-ON NULL trap, and how to write multi-table joins.

Introduction
2026-07-16

Case Converter: camelCase, snake_case & kebab-case — 9 Styles at Once

Convert identifiers between camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case and more — all nine styles side by side. Handles acronym runs like HTTPServer, digits, and bulk multi-line conversion.

Introduction
2026-07-16

LLM API Cost Calculator: Compare Claude, GPT & Gemini Pricing Side by Side

Paste a prompt, set the expected output tokens, and compare per-request API costs across Claude, GPT and Gemini models. Covers input/output pricing structure, auto-updated price tables, and estimate limits.

Ad

Stay within DevToolKits with shortcuts to the most-used utilities across the site.

Articles
1
Article Index
AI & LLM
3
AI Rules Generator LLM Token Counter LLM API Cost Calculator
Development & DevOps
9
GitHub Actions Visualizer SQL Formatter Visual SQL Builder DDL Builder SQL → ER Diagram cURL Converter chmod Calculator Cron Editor & Parser Infrastructure Diagram Builder
Data Conversion & Schemas
6
JSON Formatter JSON → TypeScript JSON → Zod JSON → OpenAPI JSON ⇔ YAML CSV ⇔ JSON Converter
Security & Cryptography
5
Base64 / 58 / 32 JWT Tool Hash & HMAC Generator JWKS Generator UUID Generator
Text & Code Helpers
5
Markdown Table Generator Text & Code Suite Regex Tester Diff Viewer Case Converter
URL, QR & Network
5
URL Encode / Decode IP / CIDR Calculator URL Params → JSON QR Generator QR Reader
Design & UI
2
Color Utility Favicon Generator
Date & Time
3
Time Zone Converter Time Units UNIX Timestamp Converter

Ad