Nazwany kolor · #C5D9E3
Blue Pearl
Blue Pearl to #C5D9E3: rgb(197 217 227), hsl(200 35% 83%), oklch(0.873 0.026 229.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Blue Pearl color name →
#C5D9E3
oklch(0.873 0.026 229.2)
Konwersje koloru
- HEX
- #c5d9e3
- RGB
- rgb(197 217 227)
- HSL
- hsl(200 35% 83%)
- HWB
- hwb(200 77% 11%)
- OKLCH
- oklch(0.873 0.026 229.2)
- OKLab
- oklab(0.873 -0.017 -0.019)
- CIE Lab
- lab(85.41 -5.43 -7.33)
- LCH
- lch(85.41 9.13 233.5)
- CMYK
- cmyk(13% 4% 0% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CBDDE6
- D1E1E9
- D6E4EB
- DCE8EE
- E2ECF1
- E8F0F4
- EDF4F7
- F3F7F9
- F9FBFC
Odcienie ciemniejsze
- ABBCC5
- 92A1A8
- 79868C
- 616C71
- 4B5357
- 353B3F
- 212527
- 0E1112
- 020203
Tony
- BED0D9
- B7C7CE
- B0BDC4
- A9B4BA
- A2ABB0
- 9BA3A6
- 949A9D
- 8D9193
- 878989
Harmonie kolorów
Komplementarna +180°
- C5D9E3
Blue Pearl
- E4D1C7
≈ Wheat Seed
Analogowa -30° +30°
- C5D9E3
Blue Pearl
- C3DBDC
≈ Light Dewpoint
- CBD6E7
≈ Mother of Pearl Silver
Triada +120° +240°
- C5D9E3
Blue Pearl
- E3CFD8
≈ Ephemeral Red
- D6D7C4
≈ Veltliner White
Komplementarna rozszczepiona +150° +210°
- C5D9E3
Blue Pearl
- E6CFCF
≈ Slightly Rose
- DFD4C3
≈ Wheat Sheaf
Tetrada +90° +180° +270°
- C5D9E3
Blue Pearl
- DDD0E0
≈ Ametrine Quartz
- E4D1C7
≈ Wheat Seed
- CDDACA
≈ April Mist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.45:1 · APCA Lc 22
Ag
AAANa czerni
WCAG 14.40:1 · APCA Lc 82
Najlepszy kolor tekstu: #000000
WCAG 14.40:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--blue-pearl: #c5d9e3;
--blue-pearl-rgb: 197 217 227;
--blue-pearl-oklch: oklch(0.873 0.026 229.2);
}
.element {
color: var(--blue-pearl);
background-color: hsl(200 35% 83%);
border-color: oklch(0.873 0.026 229.2);
}Tailwind CSS v4
@theme {
--color-blue-pearl: #c5d9e3;
--color-blue-pearl-50: #eef7fb;
--color-blue-pearl-100: #e0eaef;
--color-blue-pearl-200: #cad6dd;
--color-blue-pearl-300: #abbac2;
--color-blue-pearl-400: #90a2ab;
--color-blue-pearl-500: #758a94;
--color-blue-pearl-600: #63757d;
--color-blue-pearl-700: #4f5d64;
--color-blue-pearl-800: #394449;
--color-blue-pearl-900: #272f33;
--color-blue-pearl-950: #151c1f;
}SCSS
$blue-pearl: #c5d9e3;
$blue-pearl-rgb: 197, 217, 227;
$blue-pearl-light: mix(#fff, $blue-pearl, 20%);
$blue-pearl-dark: mix(#000, $blue-pearl, 20%);
.element {
color: $blue-pearl;
box-shadow: 0 0 0 2px rgba($blue-pearl, 0.35);
}