Nazwany kolor · #CCDDCC
Flip a Coin
Flip a Coin to #CCDDCC: rgb(204 221 204), hsl(120 20% 83%), oklch(0.88 0.029 145.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Flip a Coin color name →
#CCDDCC
oklch(0.88 0.029 145.3)
Konwersje koloru
- HEX
- #ccddcc
- RGB
- rgb(204 221 204)
- HSL
- hsl(120 20% 83%)
- HWB
- hwb(120 80% 13%)
- OKLCH
- oklch(0.88 0.029 145.3)
- OKLab
- oklab(0.88 -0.024 0.017)
- CIE Lab
- lab(86.47 -8.24 6.33)
- LCH
- lch(86.47 10.39 142.5)
- CMYK
- cmyk(8% 0% 8% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D1E0D1
- D6E4D6
- DBE7DB
- E0EBE0
- E5EEE5
- EAF1EA
- F0F5F0
- F5F8F5
- FAFCFA
Odcienie ciemniejsze
- B1C0B1
- 97A497
- 7E887E
- 656E65
- 4E554E
- 373D37
- 222622
- 0F110F
- 020202
Tony
- C4D3C4
- BCCABC
- B5C0B5
- ADB7AD
- A5ADA5
- 9EA49E
- 969B96
- 8F928F
- 878987
Harmonie kolorów
Komplementarna +180°
- CCDDCC
Flip a Coin
- E2D1E2
≈ Purplish White
Analogowa -30° +30°
- CCDDCC
Flip a Coin
- D6DAC5
≈ Smoky Light
- C4DED6
≈ Whipped Mint
Triada +120° +240°
- CCDDCC
Flip a Coin
- CED8EC
≈ Lilac Cotton Candy
- EAD1CE
≈ Cool Melon
Komplementarna rozszczepiona +150° +210°
- CCDDCC
Flip a Coin
- D8D4E9
≈ Violet Crush
- E8D0D8
≈ Orchid Rose
Tetrada +90° +180° +270°
- CCDDCC
Flip a Coin
- C6DBE8
≈ Celestial Light
- E2D1E2
≈ Purplish White
- E8D3C6
≈ Ash Plum
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.42:1 · APCA Lc 20
Ag
AAANa czerni
WCAG 14.78:1 · APCA Lc 83
Najlepszy kolor tekstu: #000000
WCAG 14.78:1 (AAA) · APCA Lc 83
Contrast pairs
Fragmenty kodu
CSS
:root {
--flip-a-coin: #ccddcc;
--flip-a-coin-rgb: 204 221 204;
--flip-a-coin-oklch: oklch(0.88 0.029 145.3);
}
.element {
color: var(--flip-a-coin);
background-color: hsl(120 20% 83%);
border-color: oklch(0.88 0.029 145.3);
}Tailwind CSS v4
@theme {
--color-flip-a-coin: #ccddcc;
--color-flip-a-coin-50: #f0f8f0;
--color-flip-a-coin-100: #e2ebe2;
--color-flip-a-coin-200: #ccd8cd;
--color-flip-a-coin-300: #aebcaf;
--color-flip-a-coin-400: #94a394;
--color-flip-a-coin-500: #7a8c7b;
--color-flip-a-coin-600: #687668;
--color-flip-a-coin-700: #535f53;
--color-flip-a-coin-800: #3d453c;
--color-flip-a-coin-900: #2a3029;
--color-flip-a-coin-950: #171c17;
}SCSS
$flip-a-coin: #ccddcc;
$flip-a-coin-rgb: 204, 221, 204;
$flip-a-coin-light: mix(#fff, $flip-a-coin, 20%);
$flip-a-coin-dark: mix(#000, $flip-a-coin, 20%);
.element {
color: $flip-a-coin;
box-shadow: 0 0 0 2px rgba($flip-a-coin, 0.35);
}