Named color · #627C98
Indigo Dreams
Indigo Dreams is #627C98: rgb(98 124 152), hsl(211 22% 49%), oklch(0.577 0.053 250.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Indigo Dreams color name →
#627C98
oklch(0.577 0.053 250.6)
Color conversions
- HEX
- #627c98
- RGB
- rgb(98 124 152)
- HSL
- hsl(211 22% 49%)
- HWB
- hwb(211 38% 40%)
- OKLCH
- oklch(0.577 0.053 250.6)
- OKLab
- oklab(0.577 -0.018 -0.05)
- CIE Lab
- lab(50.77 -4.28 -18.4)
- LCH
- lch(50.77 18.89 256.9)
- CMYK
- cmyk(36% 18% 0% 40%)
Tints · Shades · Tones
Tints
- 7188A2
- 8095AC
- 8FA2B6
- 9EAFC1
- AEBCCB
- BEC9D5
- CED6E0
- DEE4EA
- EEF1F4
Shades
- 546B84
- 475A70
- 3A4A5C
- 2D3B4A
- 212C38
- 161E27
- 0B1117
- 030508
- 000101
Tones
- 657C96
- 687D93
- 6B7D91
- 6E7E8F
- 717E8C
- 747F8A
- 777F87
- 7A7F85
- 7D8083
Color harmonies
Complementary +180°
- 627C98
Indigo Dreams
- 8E7457
≈ Library Oak
Analogous -30° +30°
- 627C98
Indigo Dreams
- 55818F
≈ Cape Lee
- 737699
≈ Kimono Violet
Triadic +120° +240°
- 627C98
Indigo Dreams
- 966D72
≈ Victorian Rose
- 6F805F
≈ Cliffside Park
Split-complementary +150° +210°
- 627C98
Indigo Dreams
- 956F62
≈ Chocolate Temptation
- 807B56
≈ Meadowland
Tetradic +90° +180° +270°
- 627C98
Indigo Dreams
- 8F6D83
≈ Dianthus Mauve
- 8E7457
≈ Library Oak
- 5D836F
≈ Jadite
Contrast & accessibility
Ag
FailOn white
WCAG 4.32:1 · APCA Lc 70
Ag
AAOn black
WCAG 4.85:1 · APCA Lc 32
Best text color: #000000
WCAG 4.85:1 (AA) · APCA Lc 32
Contrast pairs
Code snippets
CSS
:root {
--indigo-dreams: #627c98;
--indigo-dreams-rgb: 98 124 152;
--indigo-dreams-oklch: oklch(0.577 0.053 250.6);
}
.element {
color: var(--indigo-dreams);
background-color: hsl(211 22% 49%);
border-color: oklch(0.577 0.053 250.6);
}Tailwind CSS v4
@theme {
--color-indigo-dreams: #627c98;
--color-indigo-dreams-50: #ebf6ff;
--color-indigo-dreams-100: #dce9fa;
--color-indigo-dreams-200: #c5d6eb;
--color-indigo-dreams-300: #a5bad2;
--color-indigo-dreams-400: #88a1bd;
--color-indigo-dreams-500: #6c89a9;
--color-indigo-dreams-600: #5c748e;
--color-indigo-dreams-700: #495d72;
--color-indigo-dreams-800: #344454;
--color-indigo-dreams-900: #232f3b;
--color-indigo-dreams-950: #121c25;
}SCSS
$indigo-dreams: #627c98;
$indigo-dreams-rgb: 98, 124, 152;
$indigo-dreams-light: mix(#fff, $indigo-dreams, 20%);
$indigo-dreams-dark: mix(#000, $indigo-dreams, 20%);
.element {
color: $indigo-dreams;
box-shadow: 0 0 0 2px rgba($indigo-dreams, 0.35);
}