Nazwany kolor · #C8CED6
Crater Crawler
Crater Crawler to #C8CED6: rgb(200 206 214), hsl(214 15% 81%), oklch(0.849 0.013 255.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Crater Crawler color name →
#C8CED6
oklch(0.849 0.013 255.5)
Konwersje koloru
- HEX
- #c8ced6
- RGB
- rgb(200 206 214)
- HSL
- hsl(214 15% 81%)
- HWB
- hwb(214 78% 16%)
- OKLCH
- oklch(0.849 0.013 255.5)
- OKLab
- oklab(0.849 -0.003 -0.012)
- CIE Lab
- lab(82.47 -0.99 -4.73)
- LCH
- lch(82.47 4.84 258.2)
- CMYK
- cmyk(7% 4% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CDD3DA
- D3D8DE
- D8DDE2
- DEE1E6
- E3E6EA
- E9EBEE
- EEF0F3
- F4F5F7
- F9FAFB
Odcienie ciemniejsze
- AEB3BA
- 94989E
- 7B7F84
- 63666A
- 4C4E52
- 36383B
- 212325
- 0F0F10
- 020202
Tony
- C1C6CD
- B9BEC4
- B2B6BB
- ABAEB3
- A3A6AA
- 9C9EA1
- 959799
- 8E8F91
- 878788
Harmonie kolorów
Komplementarna +180°
- C8CED6
Crater Crawler
- D2CCC4
≈ Burnished Clay
Analogowa -30° +30°
- C8CED6
Crater Crawler
- C5CFD4
≈ Catalyst Grey
- CCCCD6
≈ Lilac Hint
Triada +120° +240°
- C8CED6
Crater Crawler
- D6CACB
≈ Eagle’s View
- CACFC7
≈ Murmur
Komplementarna rozszczepiona +150° +210°
- C8CED6
Crater Crawler
- D5CBC7
≈ Orchid Blush
- CECEC5
≈ Lattice
Tetrada +90° +180° +270°
- C8CED6
Crater Crawler
- D4CACF
≈ Grey Lilac
- D2CCC4
≈ Burnished Clay
- C6D0CB
≈ Infusion
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.58:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.25:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.25:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--crater-crawler: #c8ced6;
--crater-crawler-rgb: 200 206 214;
--crater-crawler-oklch: oklch(0.849 0.013 255.5);
}
.element {
color: var(--crater-crawler);
background-color: hsl(214 15% 81%);
border-color: oklch(0.849 0.013 255.5);
}Tailwind CSS v4
@theme {
--color-crater-crawler: #c8ced6;
--color-crater-crawler-50: #f3f5f9;
--color-crater-crawler-100: #e5e8ec;
--color-crater-crawler-200: #d1d4da;
--color-crater-crawler-300: #b3b8be;
--color-crater-crawler-400: #999fa6;
--color-crater-crawler-500: #81878f;
--color-crater-crawler-600: #6d7279;
--color-crater-crawler-700: #575b61;
--color-crater-crawler-800: #3f4347;
--color-crater-crawler-900: #2c2e31;
--color-crater-crawler-950: #191b1d;
}SCSS
$crater-crawler: #c8ced6;
$crater-crawler-rgb: 200, 206, 214;
$crater-crawler-light: mix(#fff, $crater-crawler, 20%);
$crater-crawler-dark: mix(#000, $crater-crawler, 20%);
.element {
color: $crater-crawler;
box-shadow: 0 0 0 2px rgba($crater-crawler, 0.35);
}