Color Scheme Generator with Lockable Swatches

A color scheme is not a collection of colors you happen to like — it is a set of colors that work together under real conditions: on buttons, on backgrounds, on text, in dark mode, next to photography, next to white space. The gap between "these look nice" and "these work" is where most random palette generators fall short. They hand you a result and leave you to figure out the structure. This generator hands you candidates; the structure is something you build through iteration, one locked swatch at a time.

The mechanic is simple. Generate a set of colors, look at what landed, lock the one that could be your primary, generate again, lock an accent candidate, and repeat until the remaining open slots are filling in with neutral or supporting tones. You are not choosing from a pre-sorted palette — you are narrowing a search space. That distinction matters because it keeps your eye active rather than passive: each round you make one deliberate judgment and let randomness handle the rest.

Every swatch in the result shows three representations: hex, RGB, and HSL. Hex (#3A7BD5) is what you paste into CSS and Figma. RGB gives you the channel breakdown that matters when you are working in compositing tools or adjusting opacity. HSL is the one to watch when you are building a scheme, because it makes the relationship between colors legible: same hue, different lightness means you are looking at a tonal pair; same lightness, very different hue means you have a contrast candidate. Reading HSL while you lock and reroll turns the process from aesthetic guessing into structured decision-making.

The iteration loop: a process you can actually follow

Step one is generating your first batch and finding the color that feels most like a primary — the one you would put on a call-to-action button, a logo mark, or a hero section. Do not overthink it; trust your first instinct. Lock that swatch. It becomes your anchor. Every subsequent judgment is relative to this one.

Step two is generating again and looking for an accent. An accent is not a second primary — it is a color that reads as clearly different from your primary while still feeling like it belongs in the same room. On the hue wheel, analogous colors (adjacent hues, within about 30 degrees) feel harmonious but can read as too similar to distinguish roles. Complementary colors (opposite the wheel, roughly 180 degrees away) create strong contrast but need to be handled carefully or the tension overwhelms. A split-complementary or triadic relationship — one color 120 to 150 degrees away from your primary — tends to give you energy without conflict. HSL makes this visible: if your primary is around hue 210 (a cool blue), an accent near hue 30 to 50 (warm amber or orange) will read as lively rather than jarring, especially if you keep both at similar saturation levels.

Step three is filling the neutral slots. This is where most scheme generators stop helping you, because a truly useful neutral is not just a grey — it is a grey that shares its DNA with the rest of your scheme. The practical method: take your primary color's hue value from HSL, drop the saturation to somewhere between 5 and 15, and then adjust lightness to the levels you need: 95 for a page background, 85 for a card surface, 40 for a border, 15 for body text. This produces what designers call a chromatic neutral — a near-grey that has a faint warmth or coolness matching your primary, so the whole scheme feels cohesive rather than assembled from separate sources. Generate a few candidates with the tool, and when one lands in the right hue neighborhood, note the hue value and derive your full neutral scale by hand.

Step four is the contrast check, and it is the one step you cannot skip. WCAG requires a contrast ratio of at least 4.5:1 between normal body text and its background, and at least 3:1 for large text (18pt or 14pt bold). These are not aesthetic preferences — they are the minimum for readability under real conditions: a phone screen in sunlight, an older monitor, someone with low-contrast vision. A contrast ratio checker (there are several free browser extensions and web tools) takes two hex values and returns the ratio in seconds. Run your primary as a button background against white text, your dark neutral as body text against your light background, and your accent as a highlighted link against whatever surface it sits on. Any pair that fails below 4.5:1 either needs the lighter color lightened further, the darker color darkened further, or the pairing reconsidered entirely.

Scheme structure: primary, supporting, accent, neutral

A working color scheme almost never needs more than four roles, and using more than that usually signals that the structure is unclear rather than rich. The primary color carries the most visual weight and the clearest brand meaning — it lives on the most prominent interactive elements and the logo. One primary is almost always enough; two primaries fighting for attention produce confusion, not character.

Supporting colors are optional variants of the primary, usually one shade lighter and one shade darker, used for hover states, active states, and pressed states. You do not need to generate these randomly — once you have your primary in HSL, incrementing and decrementing the L value by 10 to 15 points gives you the supporting scale mechanically. That is by design: the supporting scale should be predictable, not surprising.

The accent is the one place you want genuine contrast. It appears less frequently than the primary — notifications, badges, highlights, pull quotes — so it can carry more visual energy. A common mistake is choosing an accent that is too close to the primary in hue or lightness, which means it reads as a second primary and loses its function as a visual interrupt. If locking your primary and generating several rounds produces nothing that feels clearly different, try using the random color picker to explore a wider range of individual hues before committing.

The neutral scale is the invisible architecture of every scheme. It carries backgrounds, borders, dividers, placeholder text, and secondary labels — all the surfaces that are not supposed to be noticed. A monochrome neutral (pure grey) works but can feel cold or disconnected from the rest of the scheme. A chromatic neutral, as described above, integrates more naturally. If your primary is warm (orange, red, yellow), a slightly warm neutral keeps the scheme coherent. If your primary is cool (blue, teal, violet), a cool neutral follows the same logic.

Building a dark mode version from the same scheme

Dark mode is not light mode with the colors inverted. Inverting produces schemes where backgrounds become too bright, text becomes too stark, and accent colors that worked on white suddenly appear fluorescent and hard to look at. The correct approach is to rethink each role individually using HSL as your guide.

In light mode, your background is typically near lightness 97 and your text near lightness 10. In dark mode, those roles reverse in intent but not in value: your background moves to around lightness 10 to 15 (a very dark chromatic grey), and your text moves to around lightness 90 to 95 (near white). The primary color, if it was a mid-saturation hue at lightness 50 to 55, will need its lightness raised to around 60 to 65 on a dark surface to maintain the same visual prominence — dark backgrounds make mid-lightness colors read as muted. The accent will likely need a similar nudge upward.

The most efficient approach is to lock the hue and saturation values you chose in light mode and use the generator to explore different lightness levels for each dark-mode role. Generate, look at the HSL reading, note whether the hue is close to your primary or accent, and if the saturation is in the right range, adjust lightness from there. You can also use the hex color generator to explore specific hue neighborhoods when you know the general range you are targeting.

One practical test for a dark mode scheme: open both versions side by side and check that the primary button reads as equally prominent in both. If it feels subdued in dark mode, raise the lightness. If it feels bright to the point of glowing, lower the saturation slightly. The goal is not identical appearance but equivalent visual weight — the button should feel like the same design decision in both contexts.

Encoding your final scheme as CSS custom properties

Once you have locked your swatches and verified contrast, the last step is making the values reusable. Pasting hex codes directly into every CSS rule produces a scheme that works once and cannot be maintained — changing your primary means hunting down every instance of the old hex code. CSS custom properties solve this cleanly:

Define your roles in a :root block at the top of your stylesheet: --color-primary, --color-accent, --color-surface, --color-surface-raised, --color-border, --color-text, --color-text-secondary. Each property holds one hex value copied directly from this tool. Every rule in your stylesheet then references the property name rather than the value. When you update a swatch, you change one line in :root and the change propagates everywhere.

Dark mode follows naturally from this structure. Add a @media (prefers-color-scheme: dark) block that overrides the same property names with your dark-mode values. Because the property names stay the same, no component styles need to change — only the definitions in :root. This is also the pattern that design tokens in tools like Figma and Style Dictionary expect, so if you later move to a token-based workflow, the property names you defined here map directly to token names there.

For projects using Tailwind, the same values can be registered under theme.extend.colors in your config, giving you utility classes like bg-primary and text-accent that reference the same hex codes you exported from this tool. Either way — native CSS variables or a utility framework — the principle is the same: name the roles, assign the values once, reference the names everywhere. Scattered hardcoded values are the main reason color schemes drift into inconsistency over time, and a few minutes of encoding after you finish generating is what prevents that.

If you want to explore broader color families before narrowing to a scheme, the random color generator draws from across the full 16-million-color RGB space with no constraints, which is useful for finding unexpected starting points. For schemes built around a named web color as the primary, pick a random colour gives you named swatches with readable descriptions, making it easier to communicate your choice to a client or teammate before the scheme is fully assembled. Each tool occupies a different moment in the process; this generator is the one for the middle stage, when you have a direction and need to build a working set of four to six values around it.