How Rhapsody chooses colors.
Every color in a Rhapsody system is a decision with a reason. Two accent colors, named by their wheel relationship to your brand: one complementary for contrast, one analogous for kinship. Two neutrals built to neutralize, not to accent. And four semantic colors grounded in safety-color standards and perception research, not folklore.
How do you choose an accent color?
Rhapsody's Complementary Accent sits just to one side of your brand's exact opposite, nudged cooler for a warm brand, warmer for a cool one. Color theory calls that a split complement. It is chosen on the perceptual wheel of ART, Rhapsody's color model, not the RGB wheel. That is why it lands where your eye expects the opposite to be.
The wheel every design tool ships, pressed through four steps. The four ringed dots are the colors Rhapsody picks. Watch where they end up.
Making the color wheel honest
If the RGB wheel was true to the eye.
You’re taught the RGB wheel and to measure things in angles, but the truth is that some of its steps are thirty times wider than others to the human eye. Using ART, Rhapsody builds palettes based in human perception. That is what produces visual balance and harmony every single time.
Two words the rest of this page leans on. A stop is one of the 24 wheel positions above, evenly spaced to your eye, so "three stops away" is a precise address, the way "three frets up" is on a guitar. And the wheel has a warm pole and a cool pole: the orange-reds and the blues, sitting where people actually point when asked. Every hue is nearer one pole, which is what lets Rhapsody call a brand warm or cool, and steer each accent by it.
Why two accent colors?
Because contrast and kinship are different jobs. The Analogous Accent sits three wheel stops from your brand, toward the nearer temperature pole. A neighbor, not an opposite, the way an analogous color scheme stays inside one family of hues. Use the complementary accent where something must stand apart (calls to action against brand surfaces); use the analogous accent where something should belong (secondary surfaces, illustration, chart series beside your brand). Each accent has its own controls in Palette (hue, chroma, pinning), so you can tune one without disturbing the other.
Why warm and cool gray neutrals?
Rhapsody's two neutrals are tinted at your brand's hue and at its exact complement, the true antipode, straight across the ring. The goal here is neutralization, not accenting: a pair that spans your hue and its opposite pulls against itself, so the grays read as quiet surfaces instead of tinting the whole interface one direction. Whichever of the two lands nearer the warm pole becomes your Warm Neutral; the other is your Cool Neutral.
Their default chroma, its vividness, is deliberate too: each neutral carries 10% of the most vivid its hue can be, one product-wide constant, the same in Palette, the API, and this site's own chrome. Zero would be dead gray; 10% is gray that remembers whose system it belongs to. It's a default, not a cage. Both neutrals take a custom chroma, hue, or exact color.
One of the two is always the exact complement. Together they span your hue and its antipode. The pair pulls against itself, and the grays stay gray.
What color should error, warning, and success be?
Red for danger, yellow-amber for caution, green for safety, blue for notice. These aren't design folklore. They're written into safety-color standards (ANSI Z535.1, ISO 3864) and traffic-signal law, and the major design systems carry them into UI as the error color, warning, success, and info. Rhapsody's four semantic colors are canonical hues chosen from that research, then snapped to the nearest stop on your brand's wheel, at most half a stop away, so they stay in character while belonging to your system.
The red people actually point to. A true crimson, not the orange-leaning sRGB primary.
NCS focal red · ANSI Z535.1 danger
Amber, at the center of the measured orange-yellow band people call “warning.”
ISCC orange-yellow · signal amber
An emerald success green, inside the safety-green region every standard shares.
ANSI Z535.1 safety · ISO 3864 green
The web’s trust blue: information, links, calm system voice.
UI convention · ANSI blue = notice
The lightness of each ramp step is placed by measured ΔE (perceptual color difference), and every semantic ramp clears the same accessibility bar as the rest of your system: one spacing rule builds every ramp, semantic ramps included. The full ramp for this site's own system is shown under each canonical color.
How do you choose data visualization colors?
A data visualization color palette needs categorical colors that are equally distinct, and equal spacing is exactly what a perceptual wheel gives you. Start at your brand's stop and take evenly spaced stops around the wheel; each pick is the same perceptual distance from the last, which is what makes a chart legible. Two rules keep it honest. Skip the stops your semantic colors already claim (a series color that reads as "error red" carries a meaning you didn't intend). And separate adjacent series by lightness as well as hue: take your picks from different steps of each ramp, not all from the same one. That is what keeps the palette colorblind-safe and lets it survive grayscale. The wheel holds every hue at its own mid-lightness by design, so that second axis is yours to add. For sequential data, use a single hue's ramp. Every Rhapsody ramp is already a 13-step sequential palette.
The ART ring, sampled at 24 evenly-spaced stops and rotated to start at this site's brand color. Each swatch links to that color's page. Every neighboring pair is the same perceptual distance apart; that evenness is the whole trick.
Six categorical series picked from that wheel at even intervals, the brand's own stop skipped so the chart reads as data rather than branding. In a real chart, vary lightness between adjacent series too.
And these picks don't have to stay chips: in Palette, Add ramp turns any wheel stop into a full 13-step ramp of its own, so each data-viz color ships with the same tints, shades, and accessibility math as the rest of your system.
When colors collide.
Some collisions matter and some don't, and a color tool should know the difference. Rhapsody's tools are beginning to flag exactly the cases below, advisory and never blocking, each pointing back here for the reasoning. In the meantime, these are the practices I'd hand any design team:
A red or amber brand can be mistaken for a system state by people for whom those colors mean "stop" and "caution" all day. Reserve the brand for brand (logo, hero surfaces, primary buttons) and let your accents, Success, and Info carry interactive states. Keep destructive actions on the Error ramp only, so red keeps exactly one meaning, and put extra distance between brand surfaces and error toasts, badges, and form states.
Usually fine. Most of the web is blue, and readers cope. If the overlap bothers you in practice (a success toast that looks like a brand banner), separate by chroma rather than abandoning the hue: lower the semantic color's chroma a step, or move it one wheel stop while it still reads as blue or green. Category first, exact hue second.
A vivid screen color outside every press gamut will shift when printed, by more than the ΔE00 2.5 the print industry itself calls a match. If print matters to the brand, check the press verdict on the color's page early, and know the trade you'll make: a print-safe alternate can preserve the hue (calmer, same identity) or preserve the chroma (vivid, hue nudged). Decide before the packaging vendor decides for you.
Some of your users won't see the distinction you drew: color-vision differences, glare, grayscale printouts. Pair every semantic color with a second channel: an icon, a label, a position. That's WCAG 1.4.1, and it's also why Rhapsody separates lightness so carefully. A system whose steps differ in lightness survives with the hue turned off.
Sources, not vibes.
One color in. Every decision accounted for.
Palette makes every one of these choices for your brand color, and hands you the controls to overrule any of them.