Overview of Color Palette Generation and Basic Operations
This tool calculates 6 types of color schemes from a single base color based on fixed conversion rules and displays them as candidates for comparison.
You can adjust the base color by entering an opaque 6-digit HEX code, using the browser's color picker, or moving the Hue, Saturation, and Lightness (HSL) sliders.
The HEX input evaluates 6-digit strings with an optional #. For example, #3B82F6 and ffffff are valid, but 3-digit values like #fff, 8-digit values containing transparency, or strings like rgb() and hsl() are not accepted.
If the input becomes invalid midway, it does not show an error or clear the results, but simply leaves the previous valid base HSL and candidate results intact.
This is why the string in the input field and the displayed results may temporarily differ.
The color cards arranged on the right side of the screen display the HEX, RGB, and HSL of that candidate color. The cards respond to mouse clicks on the element, but they are not fully keyboard-accessible buttons.
When operated, only the raw lowercase 6-digit HEX code is copied, even if the UI displays it in uppercase; RGB, HSL, CSS variables, or the entire palette are not copied.
Because the success indicator appears before the Clipboard API Promise completes, please verify the pasted content. If the copy fails due to permissions or the browser environment, you will need to manually select and copy the text.
6 Color Scheme Generation Rules Using HSL
The color scheme candidates presented by this tool are generated by applying fixed differences to the hue angle, saturation, and lightness after rounding the HSL values of the base color.
Since hue has a 360-degree cycle, if the calculated result is negative or 360 degrees or more, it wraps around to an equivalent angle between 0 and 359 degrees.
The "Complementary" scheme consists of 2 colors, with the hue shifted by 180 degrees from the base color. The "Analogous" scheme arranges 5 colors around the base color at hue angles of -60, -30, 0, +30, and +60 degrees.
The "Triadic" scheme uses 3 colors at 0, +120, and +240 degrees, while the "Split-Complementary" scheme uses 3 colors at 0, +150, and +210 degrees.
The "Tetradic / Square" scheme generates 4 colors at 0, +90, +180, and +270 degrees.
The "Monochromatic" variation fixes the hue and sequentially changes the saturation (S) of the 5 colors using the boundaries max(10, s-20), max(10, s-10), s, min(100, s+5), and min(100, s+10).
The lightness (L) is changed using min(90, l+25), min(90, l+12), l, max(10, l-12), and max(10, l-25). Unlike strict achromatic maintenance, if the base color is a gray with 0% saturation, this calculation can actually introduce a slight color tint into the monochromatic candidates.
These are the fixed hue, saturation, and lightness rules adopted by this tool. Even if the names are common color scheme terms, this is not an evaluation algorithm that guarantees they will be beautiful, optimal, or always harmonious for all uses.
The impression of the exact same candidates will change depending on the area, text, surrounding colors, and display environment.
Internal Conversions Between HEX, 8-bit RGB, and HSL
A 6-digit HEX is an opaque sRGB color representing the red, green, and blue channels as 2-digit hexadecimal numbers. For example, #12AB34 can be read as 8-bit integers where R=18, G=171, and B=52.
This tool converts this RGB into HSL and uses the hue, saturation, and lightness to create the candidate colors described in Chapter 2.
The HSL used for color input and generation is not a perceptually uniform color space, but a representation for handling sRGB colors with Hue, Saturation, and Lightness.
For gray, white, and black with 0% saturation, changing the hue does not affect the displayed color. In this implementation, base HSL calculations round the H, S, and L values before generating the schemes.
When calculating HSL from RGB, decimals can occur in H, S, and L. However, this tool calculates the base HSL by rounding it first, and it does not strictly preserve the exact input HEX base.
It also does not recalculate the display values from the returned HEX. When you adjust the sliders, an additional HEX to HSL re-rounding can occur.
Therefore, even if you input the rounded HSL integer values displayed on the screen into another converter, they may not perfectly match the HEX and strings on the cards.
This tool does not make conversions between HEX, RGB, and HSL completely reversible with zero error; the final displayed color corresponds to the card's HEX.
Color Card Display and Black/White Text Selection
The generated HEX is applied to the background of each color card, and the HEX, RGB, and HSL are displayed alongside it inside the card.
RGB consists of integers from 0 to 255 for each channel, while HSL shows the rounded hue, saturation, and lightness values. While the UI displays the HEX in uppercase, interacting with the card copies the raw lowercase 6-digit HEX to the clipboard.
There is no switch to copy only the single RGB or HSL, nor a bulk copy for all colors.
To ensure the values on the card remain legible against the background color, the text color for the display is chosen between black #000000 or white #ffffff.
It normalizes the 8-bit RGB of the generated color to sRGB components from 0 to 1, linearizes them using an older threshold of 0.03928, and calculates the relative luminance.
Rather than directly comparing two contrast ratios, it simply applies a threshold of L > 0.179 to decide between black and white text.
Note that with 8-bit values, there is no practical difference between using 0.03928 and the current 0.04045. This black or white selection is a localized process just for displaying values within each card.
It does not evaluate the contrast ratio for the entire palette, nor does it display WCAG AA or AAA pass/fail results. It is not a feature that determines or guarantees the accessibility compliance of UI components, images, focus states, or the entire page.
Please verify the actual foreground and background colors you intend to use with a separate contrast checker for each combination.
Random Operations Generating Base Colors with Pseudo-Random Numbers
The "Random" button uses JavaScript's Math.random() for each RGB channel to generate integers from 0 to 255 one by one, which are then converted into a 6-digit HEX.
This pseudo-random number generation only changes the base color. The subsequent complementary, analogous, triadic, split-complementary, tetradic, and monochromatic variations are not explored randomly but are calculated using the fixed rules from Chapter 2.
Therefore, the random button is not an AI feature that selects the optimal color for your purpose, nor does it score a massive amount of color schemes to return the best proposal.
It is an operation to create a starting point different from the current base color and compare what candidates emerge under the 6 types of rules.
While Math.random() is not a cryptographically secure source of randomness, no secret values are generated here; it is used exclusively for the starting point of color candidates.
In practice, do not decide to adopt a color scheme solely based on how the color cards line up. Apply them to their actual roles, such as text, backgrounds, buttons, borders, hover, and focus states, to confirm their suitability.
The impression and visibility change depending on the area used, adjacent colors, text size, and the display device. This tool is a calculator for creating starting points for color scheme candidates, and does not guarantee the final design quality.
Perceptual Limitations of HSL and Unsupported Features
While HSL is a convenient representation for creating candidates by adjusting hue angles, it is not a color space that uniformly represents human-perceived color differences or brightness differences.
Even with the same 30-degree hue difference, the actual visual difference varies depending on the color gamut. Blue and yellow with the same HSL Lightness value do not necessarily appear visually equal in brightness.
This means the calculations do not treat hue intervals or lightness differences as "perceptually equal" to the eye.
This tool does not use the perceptual color differences of OKLCH, Oklab, Lab, or LCH, nor does it handle Display-P3 wide color gamut inputs, CMYK, or colors with alpha channels.
The generation targets are opaque 6-digit sRGB HEX codes. It does not evaluate transparency, gradients, image backgrounds, simulations for different color vision characteristics, color reproduction in printing, brand suitability, or the effects of color psychology.
Additionally, it does not generate CSS custom properties or design tokens, propose 60-30-10 usage ratios, lock individual colors, provide shortcuts like the spacebar, automatically create palettes for dark mode, or save color schemes.
The HEX validation, conversions, generating the 6 candidate types, and selecting the card text color are executed by JavaScript on the browser.
However, this explanation does not deny communications such as page rendering, advertising, access analytics, common features, or browser extensions.
Please judge the generated results by combining them with their appearance on the actual screen, contrast ratios, non-color visual cues, display states, and device differences.
The role of this tool is to line up candidates in an easily comparable format; it does not dictate that a specific color scheme is the correct answer, nor does it guarantee accessibility, safety, or quality.