Named color · #A1BDE0
Blair
Blair is #A1BDE0: rgb(161 189 224), hsl(213 50% 75%), oklch(0.789 0.059 254.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Blair color name →
#A1BDE0
oklch(0.789 0.059 254.2)
Color conversions
- HEX
- #a1bde0
- RGB
- rgb(161 189 224)
- HSL
- hsl(213 50% 75%)
- HWB
- hwb(213 63% 12%)
- OKLCH
- oklch(0.789 0.059 254.2)
- OKLab
- oklab(0.789 -0.016 -0.056)
- CIE Lab
- lab(75.41 -3.87 -20.91)
- LCH
- lch(75.41 21.26 259.5)
- CMYK
- cmyk(28% 16% 0% 12%)
Tints · Shades · Tones
Tints
- AAC4E3
- B3CAE6
- BDD1EA
- C6D7ED
- CFDEF0
- D9E4F3
- E2EBF6
- ECF2F9
- F5F8FC
Shades
- 8BA4C3
- 768CA6
- 62748A
- 4E5D70
- 3C4756
- 2A333E
- 191F27
- 090D12
- 010202
Tones
- 9EB7D6
- 9AB1CC
- 97AAC2
- 94A4B9
- 919EAF
- 8D98A6
- 8A929C
- 878C93
- 838689
Color harmonies
Complementary +180°
- A1BDE0
Blair
- D1B591
≈ Granivorous
Analogous -30° +30°
- A1BDE0
Blair
- 92C3D7
≈ Blue Glint
- B5B6DF
≈ Beloved
Triadic +120° +240°
- A1BDE0
Blair
- DDACAF
≈ Pale Chestnut
- ABC39D
≈ Pale Mint
Split-complementary +150° +210°
- A1BDE0
Blair
- DCAF9C
≈ Rose Cloud
- C0BD91
≈ New Foliage
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.93:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.87:1 · APCA Lc 65
Best text color: #000000
WCAG 10.87:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--blair: #a1bde0;
--blair-rgb: 161 189 224;
--blair-oklch: oklch(0.789 0.059 254.2);
}
.element {
color: var(--blair);
background-color: hsl(213 50% 75%);
border-color: oklch(0.789 0.059 254.2);
}Tailwind CSS v4
@theme {
--color-blair: #a1bde0;
--color-blair-50: #ebf6ff;
--color-blair-100: #dce9fc;
--color-blair-200: #c4d6ee;
--color-blair-300: #a4b9d6;
--color-blair-400: #87a1c1;
--color-blair-500: #6b89ad;
--color-blair-600: #5b7492;
--color-blair-700: #495c75;
--color-blair-800: #344456;
--color-blair-900: #232f3c;
--color-blair-950: #121b26;
}SCSS
$blair: #a1bde0;
$blair-rgb: 161, 189, 224;
$blair-light: mix(#fff, $blair, 20%);
$blair-dark: mix(#000, $blair, 20%);
.element {
color: $blair;
box-shadow: 0 0 0 2px rgba($blair, 0.35);
}