Indigo Ink color palette
This set is pure indigo. #1A237E is a deep royal ink, #283593 and #3949AB step up in brightness, and #5C6BC0 and #9FA8DA soften toward periwinkle. Saturation drops as the shades lighten, so the light end looks calm and slightly dusty. It has the steady, institutional feel of a university crest. Edtech platforms and legal software are good places to try it.
Indigo Ink palette in use
Use #1A237E as a dark header or background with #9FA8DA text, or a white page with #1A237E body text. #3949AB is the button color, and #5C6BC0 suits links and active tabs.
This pair measures 5.73:1, so it works for body text too. The button uses #3949AB with white text.
ButtonGood for
- Edtech platform
- Legal software dashboard
- University website
- Corporate intranet
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#1A237E | #9FA8DA | 5.73:1 | AA |
#283593 | #9FA8DA | 4.49:1 | AA large |
#3949AB | #9FA8DA | 3.34:1 | AA large |
Indigo Ink palette as code
CSS variables
:root {
--indigo-ink-1: #1A237E;
--indigo-ink-2: #283593;
--indigo-ink-3: #3949AB;
--indigo-ink-4: #5C6BC0;
--indigo-ink-5: #9FA8DA;
}Tailwind v4
@theme {
--color-indigo-ink-1: #1A237E;
--color-indigo-ink-2: #283593;
--color-indigo-ink-3: #3949AB;
--color-indigo-ink-4: #5C6BC0;
--color-indigo-ink-5: #9FA8DA;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'indigo-ink': {
100: '#1A237E',
200: '#283593',
300: '#3949AB',
400: '#5C6BC0',
500: '#9FA8DA',
},SCSS
$indigo-ink-1: #1A237E;
$indigo-ink-2: #283593;
$indigo-ink-3: #3949AB;
$indigo-ink-4: #5C6BC0;
$indigo-ink-5: #9FA8DA;JSON
["#1A237E","#283593","#3949AB","#5C6BC0","#9FA8DA"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.