Nazwany kolor · #B8CBE5
Periwinkle Dream
Periwinkle Dream to #B8CBE5: rgb(184 203 229), hsl(215 46% 81%), oklch(0.836 0.042 256.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Periwinkle Dream color name →
#B8CBE5
oklch(0.836 0.042 256.3)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BFD0E8
- C6D5EA
- CDDAED
- D4E0F0
- DBE5F2
- E2EAF5
- E9EFF7
- F1F5FA
- F8FAFC
Odcienie ciemniejsze
- A0B0C7
- 8896AA
- 717D8E
- 5B6572
- 454D58
- 31373F
- 1E2228
- 0C0F12
- 020203
Tony
- B2C3DA
- ADBCD0
- A7B4C6
- A1ACBB
- 9CA5B1
- 969DA7
- 91969D
- 8B8F93
- 85878A
Harmonie kolorów
Komplementarna +180°
- B8CBE5
Periwinkle Dream
- D9C6AC
≈ New Khaki
Analogowa -30° +30°
- B8CBE5
Periwinkle Dream
- ADD0DF
≈ Flemish Blue
- C6C6E4
≈ Purple Purity
Triada +120° +240°
- B8CBE5
Periwinkle Dream
- E3BFC0
≈ Sweet Blush
- BDD0B5
≈ Kiss of Mint
Komplementarna rozszczepiona +150° +210°
- B8CBE5
Periwinkle Dream
- E2C2B3
≈ Sunwashed Brick
- CCCCAC
≈ Eaves
Tetrada +90° +180° +270°
- B8CBE5
Periwinkle Dream
- DFBFCF
≈ Scandalous Rose
- D9C6AC
≈ New Khaki
- B0D2C3
≈ Lester
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.65:1 · APCA Lc 29
Ag
AAANa czerni
WCAG 12.71:1 · APCA Lc 74
Najlepszy kolor tekstu: #000000
WCAG 12.71:1 (AAA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
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);
}