Dzzz

Color Tools

Palettes, gradients, format conversion, and contrast checking — all on your device.

#3B82F6
#F6AF3B

Free colour tools that run entirely on your device: build a palette from any base colour using six harmony schemes, design linear, radial, or conic CSS gradients with a live preview, convert between HEX, RGB, and HSL, and check text contrast against the WCAG AA and AAA thresholds. Nothing is uploaded — everything works offline.

About this tool

What you provide

  • A base colour in HEX, and a harmony scheme.
  • Gradient stops, gradient type (linear, radial or conic) and angle.
  • Two colours for the contrast check, and whether the text is large.

What you get

  • A palette you can copy as a HEX list or as CSS variables.
  • CSS for the gradient, and the colour converted between HEX, RGB and HSL.
  • A contrast ratio with a pass or fail against the WCAG AA and AAA thresholds.

Limits

  • Works in 8-bit sRGB — HEX, RGB and HSL only, with no CMYK or print colour profiles.
  • Converting back and forth can shift a channel by one, which is normal 8-bit rounding.
  • The contrast check covers the two colours you enter, not the rest of a design.

How to use it

  1. Open a panel

    Choose Palette, Gradient, or Convert & Contrast in the row of tabs under the title.

  2. Build a palette

    In Palette, set the base colour with the colour picker or the HEX field, choose a harmony (Complementary, Analogous, Triadic, Tetradic, Split complementary or Monochromatic), then lock the swatches you want to keep and press Regenerate to reroll the rest.

  3. Design a gradient

    In Gradient, pick Linear, Radial or Conic, set "Angle (degrees)" — offered for the linear and conic types — and add or remove colour stops with their positions, while the preview and the CSS line below it update as you go.

  4. Convert and check contrast

    In Convert & Contrast, type into the HEX, RGB or HSL field and the other two follow, then set the text and background colours and tick Large text to read the contrast ratio with its AA and AAA verdicts.

  5. Copy the result

    Use Copy HEX list or Copy CSS variables in the palette, Copy CSS in the gradient panel, or "Copy link to this result" to share the settings the URL carries.

Frequently asked questions

How do I convert a color between HEX and RGB?

Use Color Tools' format conversion feature to convert colors between formats, right on your device.

Can I check color contrast for accessibility here?

Yes, Color Tools includes a contrast checker alongside its format conversion features.

Is Color Tools free and does it work entirely on your device?

Yes, it is free to use and everything runs entirely on your device.