Color tools

Color Palette color ticket generator

Automatically generate complete color gradations based on the main color, supporting multiple color schemes. Copy HEX/RGB/HSL and export CSS Variables and Tailwind color chips with one click.

Main color selection
HEX
RGB
HSL
color scheme
remit
Color ticket Palette
5 colors · monochrome
:root {\n --primary-50: #fff1f2;\n --primary-100: #ffe4e6;\n ...}

Features

Various color schemes
10 level color tickets (50-900)
HEX/RGB/HSL real-time display
Copy color values with one click
CSS Variables generate
Tailwind Color Levels
Random color matching
Lock color function
Export PNG/SVG/JSON
Undo/Redo
Pure front-end offline execution

Introduction to color theory

Color matching is a crucial part of design. Understanding different color schemes can help you create a harmonious, professional visual composition.

monochrome

Same hue but different brightness, the safest color matching

Similar colors

Adjacent colors on the hue circle, harmonious and natural

complementary colors

Relative colors on the hue circle, strong contrast

Three roles

Hue circle 120° distribution, lively and rich

four colors

Two complementary colors, rich and balanced

square

Hue circle 90° intervals, balanced and diverse

How to Use

  1. Use Color Picker or enter HEX / RGB / HSL Choose a main color.
  2. switch color scheme(Single color, similar, complementary, triangle, etc.) View different color matching effects.
  3. Display of each color ticket HEX / RGB / HSL, click to copy.
  4. Click on the color ticket lock icon This color can be locked and retained when re-randoming.
  5. switch to CSS Variables or Tailwind color ticket tag, copy the generated code.
  6. Use remit Button to download in PNG, SVG or JSON format.

Frequently Asked Questions

What is color scale 50-900?
This is based on the color scale naming method of Tailwind CSS.50 It is the lightest color (close to white),900 is the darkest (close to black),500 as the base main color. This naming allows the color to maintain a consistent hue at different brightnesses, making it easier to use in the design system.
What is the difference between Monochromatic and Analogous?
Monochrome (single color) It is the change of different brightness under the same hue, and the whole is unified and harmonious.Analogous (similar colors) It uses 2-3 adjacent hues on the hue circle to produce a natural and soft gradient effect, which is often used for button hover and background levels.
How to import color chips into Tailwind project?
switch to Tailwind color ticket tag, copy the resulting CSS Variables, or copy the color values directly into your tailwind.config.js in theme.extend.colors block.
Is this tool free?
Yes, it's completely free, no registration required. All processing is performed locally in your browser and no data is sent to the server.

Browser compatibility

Chrome 10+
Firefox 3.5+
Safari 3+
Edge 12+
Opera 10+
iOS Safari 3+
Android 4.4+
IE 9+

Privacy Statement

This tool executes entirely in your browser. Any colors and color chips you create will not be sent to any server. We do not use cookies or tracking with this tool.