Hue is the angular position of a color in the circle, usually from 0 to 359 degrees in HSL. It is what makes a color "red", "blue" and so on, regardless of saturation and lightness.
Carregando ferramenta… / Loading tool…
Build analogous, complementary, triadic, tetradic and monochrome harmonies with controllable HSL.
The color wheel is the circle where hues are arranged by angle, and it turns palette choice from guesswork into a geometric relationship. From a base color, harmony schemes are positions on the circle: analogous colors sit side by side (calm), complementary colors sit opposite (maximum contrast), triadic colors form a triangle (vibrant balance), tetradic a rectangle, and monochrome varies only the saturation and lightness of a single hue. This tool works in HSL, hue, saturation and lightness, because it is the most intuitive model for spinning the wheel and tuning intent. In interfaces, though, a good palette is not just the prettiest one: it needs sufficient contrast, clear hierarchy, and it must not rely on color alone to communicate state.
Harmonies are rules of angular distance from the base hue. Analogous uses close neighbors (for example, ±30°): a cohesive, quiet result, good for backgrounds and themes. Complementary uses the opposite (+180°): maximum hue contrast, great for making one element stand out, but tiring over large areas.
Triadic spreads three hues 120° apart: vibrant and balanced, useful when three roles must be separated. Tetradic (two complementary pairs) offers more variety, requiring a dominant color so they do not compete. Monochrome keeps a single hue and varies saturation and lightness, the safest for scales and states.
Suppose a brand with a base blue at hue 220°. A monochrome scheme generates lighter and darker tones of the same blue for backgrounds, borders and states, consistent and easy to apply. To create a standout accent (an action button), the complementary (around 40°, an orange) draws attention without leaving the wheel's logic.
A triadic palette from 220° would also bring something around 100° (green) and 340° (pink/magenta), useful to categorize sections or data series. After generating the HEX values, the step you cannot skip is validating contrast in the real context, the wheel gives the hue relationship, it does not guarantee legibility.
HSL is practical for CSS and for spinning the wheel, but it is not perceptually uniform: two hues with the same HSL "lightness" can look very different in brightness to the eye (a yellow at 50% lightness looks far lighter than a blue at 50%). So the wheel's values are a starting point, and the final tuning should be done visually.
Two checks finish the job: luminance contrast between text and background (the WCAG guidelines call for at least 4.5:1 for normal text) and color independence, never communicate an important state by hue alone, so as not to exclude people with low vision or color blindness. Beauty and accessibility go together.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/color-wheel"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Color Wheel"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Hue is the angular position of a color in the circle, usually from 0 to 359 degrees in HSL. It is what makes a color "red", "blue" and so on, regardless of saturation and lightness.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAThe palette is calculated locally in the browser.