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: Frequently asked questions

  • Which color formats are supported?

    You can convert between HEX (#RGB / #RRGGBB), RGB, and HSL.
  • Which WCAG checks are shown?

    The tool displays contrast ratios for normal and large text with pass/fail status.
  • Is my input saved anywhere?

    All processing happens in the browser. Closing the page resets the inputs.

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.

Recent Articles

Ad

Ad