Nazwany kolor · #8CC1D6
Boutonniere
Boutonniere to #8CC1D6: rgb(140 193 214), hsl(197 47% 69%), oklch(0.781 0.063 224.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Boutonniere color name →
#8CC1D6
oklch(0.781 0.063 224.5)
Konwersje koloru
- HEX
- #8cc1d6
- RGB
- rgb(140 193 214)
- HSL
- hsl(197 47% 69%)
- HWB
- hwb(197 55% 16%)
- OKLCH
- oklch(0.781 0.063 224.5)
- OKLab
- oklab(0.781 -0.045 -0.044)
- CIE Lab
- lab(74.91 -14.08 -16.42)
- LCH
- lch(74.91 21.63 229.4)
- CMYK
- cmyk(35% 10% 0% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 98C7DA
- A3CDDE
- AFD4E2
- BADAE7
- C6E0EB
- D1E6EF
- DDECF3
- E8F3F7
- F4F9FB
Odcienie ciemniejsze
- 79A7BA
- 678F9E
- 557784
- 435F6A
- 334952
- 23343B
- 142025
- 070E10
- 010202
Tony
- 8BBACD
- 8BB4C4
- 8AADBC
- 89A7B3
- 87A0AA
- 869AA2
- 859399
- 838D91
- 828688
Harmonie kolorów
Komplementarna +180°
- 8CC1D6
Boutonniere
- DBAC97
≈ Shy Time
Analogowa -30° +30°
- 8CC1D6
Boutonniere
- 88C5C4
≈ Bay Mist
- 9DBAE0
≈ Pylon
Triada +120° +240°
- 8CC1D6
Boutonniere
- D6A8C1
≈ Heart to Heart
- BEBA8C
≈ Back to Nature
Komplementarna rozszczepiona +150° +210°
- 8CC1D6
Boutonniere
- DDA8AB
≈ Peach Poppy
- D0B38B
≈ Link to the Past
Tetrada +90° +180° +270°
- 8CC1D6
Boutonniere
- C7ACD4
≈ Darling Lilac
- DBAC97
≈ Shy Time
- A7C199
≈ Heartland Frosty
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.96:1 · APCA Lc 38
Ag
AAANa czerni
WCAG 10.71:1 · APCA Lc 65
Najlepszy kolor tekstu: #000000
WCAG 10.71:1 (AAA) · APCA Lc 65
Contrast pairs
Fragmenty kodu
CSS
:root {
--boutonniere: #8cc1d6;
--boutonniere-rgb: 140 193 214;
--boutonniere-oklch: oklch(0.781 0.063 224.5);
}
.element {
color: var(--boutonniere);
background-color: hsl(197 47% 69%);
border-color: oklch(0.781 0.063 224.5);
}Tailwind CSS v4
@theme {
--color-boutonniere: #8cc1d6;
--color-boutonniere-50: #e3f9ff;
--color-boutonniere-100: #d3edf8;
--color-boutonniere-200: #b9dae9;
--color-boutonniere-300: #96bfd0;
--color-boutonniere-400: #76a7ba;
--color-boutonniere-500: #558fa5;
--color-boutonniere-600: #49798c;
--color-boutonniere-700: #3a6170;
--color-boutonniere-800: #294752;
--color-boutonniere-900: #1b3139;
--color-boutonniere-950: #0b1d24;
}SCSS
$boutonniere: #8cc1d6;
$boutonniere-rgb: 140, 193, 214;
$boutonniere-light: mix(#fff, $boutonniere, 20%);
$boutonniere-dark: mix(#000, $boutonniere, 20%);
.element {
color: $boutonniere;
box-shadow: 0 0 0 2px rgba($boutonniere, 0.35);
}