Explore a single color or build balanced palettes with an interactive color wheel. Choose a mode, drag any point, and view or copy colors in your preferred format.
Drag the selected point or click anywhere on the wheel.
Main colors stay centered between three perceptually balanced darker and lighter steps.
Each column belongs to one point on the wheel. The middle row contains the harmony colors; the rows above and below use OKLCH-based perceptual lightness steps with chroma adjusted to stay inside the displayable sRGB gamut.
Tints mix the selected color with white; shades mix it with black. It follows the wheel selection automatically, but you can edit this color independently.
Change the color here without changing the wheel, palette, or contrast checker.
Create classic tones by progressively mixing the selected color with neutral gray. It follows the wheel selection automatically, but you can edit this color independently.
Each step mixes more neutral gray (#808080) into the selected color.
Create progressively more saturated versions of the selected color while keeping its HSV hue and value fixed. It follows the wheel selection automatically, but you can edit this color independently.
Hue and value stay fixed while HSV saturation increases from the selected color toward 100%.
Explore nearby hues around the selected color while keeping its HSV saturation and value fixed. It follows the wheel selection automatically, but you can edit this color independently.
Saturation and value stay fixed while hue shifts from −60° to +60° around the selected color.
Explore lower and higher brightness values while keeping the selected color’s HSV hue and saturation fixed. It follows the wheel selection automatically, but you can edit this color independently.
The selected color starts the scale, then perceived brightness increases toward the brightest displayable version.
Compare any background and text colors. Enter values in the selected color format or choose colors, then check the contrast ratio and WCAG results for normal and large text.
The quick brown fox jumps over the lazy dog. Use this preview to see how the two colors work together.
The Color Tool is a free color palette generator built around an interactive color wheel. No account or sign-up is required. You can choose colors, explore common color harmonies, generate lighter and darker variations, create tints and shades, check color contrast, and export palettes directly from the tool.
Start with a single color, select a predefined harmony, or use Custom mode to move individual color points freely around the wheel. Colors can also be entered directly, and the global color format can be switched between HEX, RGB, HSL, and OKLCH.
Rather than stopping at a basic palette, the tool provides several ways to examine and develop selected colors for design, UI, and development work.
A color wheel arranges hues around a circle to make the relationships between colors easier to understand. Colors positioned near each other have closely related hues, while colors located farther apart can create stronger differences and contrast.
The history of the color wheel is closely connected to early studies of light and color. Isaac Newton arranged the visible spectrum into a circular form while studying optics, and his 1704 book Opticks became an important part of the scientific history of color. The Smithsonian has a useful overview of the development of color theory and the color wheel.
Modern color wheels are commonly used to explore relationships such as monochromatic, complementary, analogous, and triadic color harmonies.
A color harmony is a group of colors selected according to their relationship on the color wheel. These relationships provide a useful starting point for building a palette, although saturation, lightness, contrast, and context also affect how the final colors work together.
A monochromatic color scheme is based on a single hue. Variation comes from changing properties such as lightness, saturation, tint, shade, or tone rather than selecting unrelated hues.
This creates a closely connected color palette that stays within the same general color family.
Complementary colors are positioned opposite each other on the color wheel. In a circular hue system, the two colors are separated by approximately 180 degrees.
Because their hues are far apart, complementary colors usually create strong visual contrast. They can be useful when one color needs to stand out clearly against another.
Analogous colors sit close to one another on the color wheel. Because their hues are related, they usually create a smoother and more unified color scheme.
For example, a palette may move through nearby areas such as blue, blue-green, and green rather than jumping to the opposite side of the wheel.
A triadic color scheme uses three hues placed at equal intervals around the color wheel. On a 360-degree wheel, the colors are separated by approximately 120 degrees.
This creates more hue variety than a monochromatic or analogous palette while maintaining a regular relationship between the three colors.
A useful palette does not always need to follow a predefined harmony.
Custom mode turns the interactive wheel into a custom color wheel, allowing each color point to be moved independently. Up to five colors can be used, making it possible to create a custom color palette around existing brand colors, interface requirements, illustrations, or other design constraints.
This makes the custom color wheel useful when a fixed harmony is too restrictive and you want direct control over how each color is positioned.
Tints, shades, and tones are related concepts, but they describe different ways of modifying a color.
A tint is created by mixing a color with white, producing progressively lighter versions. A shade is created by mixing a color with black, producing darker versions. A tone is created by introducing neutral gray, reducing the intensity of the original color without simply making it lighter or darker.
The Tints & Shades section can generate either 5 or 10 tints and 5 or 10 shades from a selected color. The Tones section creates a separate scale by gradually adding neutral gray.
These variations can be useful when a single base color needs to be expanded into backgrounds, borders, states, illustrations, or other related design elements.
The tool also provides several ways to explore how a selected color changes when individual properties are adjusted.
Each harmony color receives a perceptual darker and lighter scale with three darker and three lighter variations. These colors are calculated using OKLCH rather than a simple HSL lightness shift.
OKLCH describes colors using lightness, chroma, and hue and is useful when working with perceptual changes in color. When necessary, chroma is adjusted so generated colors remain within the available sRGB range.
This perceptual scale is separate from traditional tints and shades. Tints and shades are based on mixing a color with white or black, while the OKLCH-based scale is intended to create visually balanced lighter and darker steps around the source color.
Additional scales make it possible to inspect other properties:
These scales provide different views of the same base color without requiring every variation to be selected manually.
Colors that work well together in a palette are not automatically suitable for text and interface elements.
The built-in color contrast checker lets you select independent background and text colors and view them together in a live text preview. The contrast ratio is calculated automatically, and the result is checked against WCAG AA and AAA criteria for normal and large text.
Background and text colors can also be swapped to compare the same pair in reverse.
For WCAG AA, normal text generally requires a contrast ratio of at least 4.5:1, while large text requires at least 3:1. AAA uses stricter requirements of 7:1 for normal text and 4.5:1 for large text.
Checking contrast while creating a palette can help identify combinations that may not provide sufficient readability before they are used in a website or interface.
Different projects use different color formats.
HEX is widely used in CSS and web design. RGB represents colors through red, green, and blue components. HSL describes hue, saturation, and lightness. OKLCH uses lightness, chroma, and hue within a perceptual color model.
The global Color Format setting changes how colors are displayed and copied throughout the Color Tool without changing the underlying color calculations.
This makes it possible to explore colors visually and copy them in the format that is most useful for the current project.
Generated colors can be exported without manually rewriting each value.
Individual Export controls are available for the Color Palette, Tints & Shades, Tones, Saturation, Hue Shift, and Brightness sections. Export All combines the generated color groups into a single output, excluding the independent Contrast Checker.
Several export formats are available:
A custom name or prefix can be added before export so generated variables and tokens follow the naming used by the project.
The export output can be previewed before use, copied directly to the clipboard, or downloaded in the appropriate format.
A color palette often begins with a single color but eventually requires related hues, lighter and darker variations, accessible text combinations, and values that can be transferred into a real project.
The interactive color wheel provides the starting point, while harmony controls, the custom color wheel, tints, shades, tones, perceptual scales, contrast checking, and export options make it possible to examine selected colors in more detail.
The Color Tool is free to use in the browser and does not require an account, allowing these color relationships and variations to be explored without creating a profile or signing in.