Color Wheel
Interactive HSL color wheel with harmony suggestions and palette export.
关于此工具
An interactive canvas-based HSL color wheel that lets you click anywhere to select a color. The selected color is immediately shown with its hex, RGB, and HSL values. Four harmony modes — Complementary, Triadic, Tetradic, and Analogous — automatically calculate related colors to form a balanced palette. Swatches for each harmony color are displayed with their hex codes. Export your entire palette as CSS custom properties (variables) with one click. Useful for designers choosing color schemes, developers implementing design tokens, and anyone exploring color relationships.
使用方法
- 1 Click anywhere on the color wheel to select a hue and saturation.
- 2 Adjust the lightness slider below the wheel to change brightness.
- 3 View the selected color's hex, RGB, and HSL values.
- 4 Choose a harmony mode: Complementary, Triadic, Tetradic, or Analogous.
- 5 Swatches for the harmony colors appear with their hex codes.
- 6 Click Export CSS to copy the palette as CSS custom properties.
常见问题
Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.
检查前景色/背景色对的WCAG 2.1对比度，即时获取通过/失败结果。
在 HEX、RGB、HSL、HSV 和 CMYK 之间转换颜色 — 实时预览。
可视化地以拖放停靠点创建美丽的多停靠点CSS渐变。
可视化构建CSS线性和径向渐变，并复制可直接使用的CSS属性。