Named color · #B8CBE5
Periwinkle Dream
Periwinkle Dream is #B8CBE5: rgb(184 203 229), hsl(215 46% 81%), oklch(0.836 0.042 256.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Periwinkle Dream color name →
#B8CBE5
oklch(0.836 0.042 256.3)
Color conversions
- HEX
- #b8cbe5
- RGB
- rgb(184 203 229)
- HSL
- hsl(215 46% 81%)
- HWB
- hwb(215 72% 10%)
- OKLCH
- oklch(0.836 0.042 256.3)
- OKLab
- oklab(0.836 -0.01 -0.041)
- CIE Lab
- lab(80.86 -2.58 -15.23)
- LCH
- lch(80.86 15.44 260.4)
- CMYK
- cmyk(20% 11% 0% 10%)
Tints · Shades · Tones
Tints
- BFD0E8
- C6D5EA
- CDDAED
- D4E0F0
- DBE5F2
- E2EAF5
- E9EFF7
- F1F5FA
- F8FAFC
Shades
- A0B0C7
- 8896AA
- 717D8E
- 5B6572
- 454D58
- 31373F
- 1E2228
- 0C0F12
- 020203
Tones
- B2C3DA
- ADBCD0
- A7B4C6
- A1ACBB
- 9CA5B1
- 969DA7
- 91969D
- 8B8F93
- 85878A
Color harmonies
Complementary +180°
- B8CBE5
Periwinkle Dream
- D9C6AC
≈ New Khaki
Analogous -30° +30°
- B8CBE5
Periwinkle Dream
- ADD0DF
≈ Flemish Blue
- C6C6E4
≈ Purple Purity
Triadic +120° +240°
- B8CBE5
Periwinkle Dream
- E3BFC0
≈ Sweet Blush
- BDD0B5
≈ Kiss of Mint
Split-complementary +150° +210°
- B8CBE5
Periwinkle Dream
- E2C2B3
≈ Sunwashed Brick
- CCCCAC
≈ Eaves
Tetradic +90° +180° +270°
- B8CBE5
Periwinkle Dream
- DFBFCF
≈ Scandalous Rose
- D9C6AC
≈ New Khaki
- B0D2C3
≈ Lester
Contrast & accessibility
Ag
FailOn white
WCAG 1.65:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.71:1 · APCA Lc 74
Best text color: #000000
WCAG 12.71:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--periwinkle-dream: #b8cbe5;
--periwinkle-dream-rgb: 184 203 229;
--periwinkle-dream-oklch: oklch(0.836 0.042 256.3);
}
.element {
color: var(--periwinkle-dream);
background-color: hsl(215 46% 81%);
border-color: oklch(0.836 0.042 256.3);
}Tailwind CSS v4
@theme {
--color-periwinkle-dream: #b8cbe5;
--color-periwinkle-dream-50: #eef6ff;
--color-periwinkle-dream-100: #dfe9f6;
--color-periwinkle-dream-200: #c9d5e7;
--color-periwinkle-dream-300: #aab8cd;
--color-periwinkle-dream-400: #8fa0b8;
--color-periwinkle-dream-500: #7488a2;
--color-periwinkle-dream-600: #637389;
--color-periwinkle-dream-700: #4f5c6e;
--color-periwinkle-dream-800: #394351;
--color-periwinkle-dream-900: #272f38;
--color-periwinkle-dream-950: #151b23;
}SCSS
$periwinkle-dream: #b8cbe5;
$periwinkle-dream-rgb: 184, 203, 229;
$periwinkle-dream-light: mix(#fff, $periwinkle-dream, 20%);
$periwinkle-dream-dark: mix(#000, $periwinkle-dream, 20%);
.element {
color: $periwinkle-dream;
box-shadow: 0 0 0 2px rgba($periwinkle-dream, 0.35);
}