Colors

OKLCH color system with Delphi brand colors and an interactive generator for creating harmonious palettes.

Tangerine (Brand Orange)

Tangerine is our signature brand color. It's deliberately bolder and punchier than a standard color scale. Higher chroma values create the vibrant, energetic feel that signifies Delphi elements. Use it sparingly for primary actions, brand moments, and interactive elements that need to stand out.

Solid
1
2
3
4
5
6
7
8
9
10
11
12
Alpha (using step 9 as base)
9/5
9/10
9/20
9/30
9/40
9/50
9/70
9/90
9/100
 
 
 

Tangerine-9 (#FD5400) is our base brand color, used for primary buttons, solid backgrounds, and key interactive elements. Click any swatch above to copy its hex value.

/* Tangerine Scale - globals.css is the source of truth */
--tangerine-1:  oklch(0.99 0.0096 42); /* Lightest */
--tangerine-2:  oklch(0.97 0.0192 42); /* App background */
--tangerine-3:  oklch(0.94 0.036 42);  /* Subtle background */
--tangerine-4:  oklch(0.90 0.06 42);   /* Hover states */
--tangerine-5:  oklch(0.85 0.096 42);  /* Borders (subtle) */
--tangerine-6:  oklch(0.79 0.132 42);  /* Borders (standard) */
--tangerine-7:  oklch(0.72 0.18 42);   /* Solid backgrounds */
--tangerine-8:  oklch(0.68 0.21 42);   /* Solid backgrounds (darker) */
--tangerine-9:  oklch(0.67 0.22 42);   /* #FD5400 - Base brand color */
--tangerine-10: oklch(0.60 0.21 42);   /* Hover */
--tangerine-11: oklch(0.50 0.18 42);   /* Active */
--tangerine-12: oklch(0.40 0.14 42);   /* Text */
// Tailwind usage
<button className="bg-tangerine-9 hover:bg-tangerine-10">Primary action</button>
<span className="text-tangerine-11">Accent text</span>
<div className="bg-tangerine-9/10">Soft brand tint</div>

Stone (Base)

Our neutral palette built on OKLCH with low chroma for a refined, warm appearance. Stone replaces Sand, which we previously used for base colors. Light mode uses hue 70 (neutral), dark mode uses hue 55 (warmer).

1
2
3
4
5
6
7
8
9
10
11
12
/* Stone Scale - Light Mode (hue 70) */
--stone-1:  oklch(0.995 0.004 70);  /* Lightest */
--stone-2:  oklch(0.965 0.008 70);  /* App background */
--stone-3:  oklch(0.940 0.010 70);  /* Subtle background */
--stone-4:  oklch(0.915 0.012 70);  /* Hover states */
--stone-5:  oklch(0.870 0.014 70);  /* Borders (subtle) */
--stone-6:  oklch(0.825 0.016 70);  /* Borders (standard) */
--stone-7:  oklch(0.750 0.014 70);  /* Solid backgrounds */
--stone-8:  oklch(0.670 0.012 70);  /* Solid backgrounds (darker) */
--stone-9:  oklch(0.580 0.010 70);  /* UI elements */
--stone-10: oklch(0.490 0.008 70);  /* Secondary text */
--stone-11: oklch(0.400 0.006 70);  /* Primary text */
--stone-12: oklch(0.250 0.005 70);  /* High contrast text */
// Stone palette usage
<div className="bg-stone-2">App background</div>
<div className="bg-stone-3 border border-stone-6">Card with border</div>
<p className="text-stone-11">Body text</p>
<h1 className="text-stone-12">High contrast heading</h1>

OKLCH Color Generator

Use this tool to generate harmonious color palettes for any hue. Adjust the hue slider to explore different colors while maintaining consistent lightness and chroma relationships.

UI Preview (Step 9 bg, Step 10 hover)
Badge
Solid
1
2
3
4
5
6
7
8
9
10
11
12
Alpha (using step 9 as base)
9/5
9/10
9/20
9/30
9/40
9/50
9/70
9/90
9/100
 
 
 
OKLCH Values (editable)
StepLightnessChromaOKLCHPreview
1oklch(0.9900 0.0096 255.00)
2oklch(0.9700 0.0192 255.00)
3oklch(0.9400 0.0360 255.00)
4oklch(0.9000 0.0500 255.00)
5oklch(0.8600 0.0800 255.00)
6oklch(0.8200 0.1000 255.00)
7oklch(0.7400 0.1400 255.00)
8oklch(0.6500 0.1800 255.00)
9oklch(0.5800 0.2000 255.00)
10oklch(0.5200 0.1900 255.00)
11oklch(0.4600 0.1700 255.00)
12oklch(0.4000 0.1400 255.00)
CSS Variables
:root {
  --color-1: oklch(0.9900 0.0096 255.00);
  --color-2: oklch(0.9700 0.0192 255.00);
  --color-3: oklch(0.9400 0.0360 255.00);
  --color-4: oklch(0.9000 0.0500 255.00);
  --color-5: oklch(0.8600 0.0800 255.00);
  --color-6: oklch(0.8200 0.1000 255.00);
  --color-7: oklch(0.7400 0.1400 255.00);
  --color-8: oklch(0.6500 0.1800 255.00);
  --color-9: oklch(0.5800 0.2000 255.00);
  --color-10: oklch(0.5200 0.1900 255.00);
  --color-11: oklch(0.4600 0.1700 255.00);
  --color-12: oklch(0.4000 0.1400 255.00);
}

Understanding OKLCH

OKLCH stands for:

  • L - Lightness (0-1, where 0 is black and 1 is white)
  • C - Chroma (0-0.4, color intensity/saturation)
  • H - Hue (0-360, the color wheel angle)

OKLCH provides perceptually uniform colors, meaning equal steps in lightness appear equally different to human eyes. This makes it easier to create accessible color combinations.

Scale Convention (1-12)

We use a 1-12 scale inspired by Radix Colors:

  • 1-2 - App backgrounds
  • 3-4 - Subtle backgrounds, hover states
  • 5-6 - Borders, separators
  • 7-8 - Solid backgrounds, hover on solid
  • 9 - Primary solid color
  • 10-11 - Hover/active states, text on colored backgrounds
  • 12 - High contrast text

Things to Watch

Nesting light solid colors

Avoid nesting light solid colors (steps 1-4) inside each other. The boundaries become indistinguishable, especially if background colors change later.

Avoid

Where does each layer end?

stone-2 → stone-3 → stone-4
Prefer

Clear stacking layers

stone-12/5 → stone-12/5 → stone-12/5

Alpha colors stack and compound, creating clear visual hierarchy regardless of the base background.

Orange for warnings

Orange is our brand color (Tangerine). Using it for warnings creates confusion between brand elements and system feedback. Use yellow for warnings instead.

Avoid

⚠ Is this a warning or a feature?

Prefer

⚠ Clearly a system warning

Accessibility

When using colors, ensure sufficient contrast ratios:

CombinationContrastWCAG
Step 12 on Step 1~15:1AAA
Step 11 on Step 1~10:1AAA
Step 9 on Step 1~5:1AA
Step 1 on Step 9~5:1AA

Always test your color combinations with contrast checking tools.

ESC
No results found
ThoughtsBrandSystem