Couleur nommée la plus proche · #BACDC8
#BACDC8
Couleur nommée la plus proche: Coast to Coast
#BACDC8 (rgb(186 205 200), hsl(164 16% 77%), oklch(0.832 0.022 178.2)) est la plus proche de la couleur nommée Coast to Coast. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#BACDC8
oklch(0.832 0.022 178.2)
Conversions de couleur
- HEX
- #bacdc8
- RGB
- rgb(186 205 200)
- HSL
- hsl(164 16% 77%)
- HWB
- hwb(164 73% 20%)
- OKLCH
- oklch(0.832 0.022 178.2)
- OKLab
- oklab(0.832 -0.022 0.001)
- CIE Lab
- lab(80.85 -7.38 0.18)
- LCH
- lch(80.85 7.39 178.6)
- CMYK
- cmyk(9% 0% 2% 20%)
Teintes · Ombres · Tons
Teintes
- C1D2CD
- C8D7D3
- CEDCD8
- D5E1DE
- DCE6E3
- E3EBE9
- EAF0EE
- F1F5F4
- F8FAF9
Ombres
- A1B2AE
- 899894
- 727E7B
- 5C6663
- 464E4C
- 323836
- 1E2321
- 0D0F0F
- 020202
Tons
- B4C5C1
- AEBDB9
- A8B5B2
- A2ADAB
- 9DA6A3
- 979E9C
- 919695
- 8B8F8E
- 868787
Harmonies de couleurs
Complémentaire +180°
- BACDC8
Coast to Coast
- D5C3C8
≈ Victorian Cottage
Analogue -30° +30°
- BACDC8
Coast to Coast
- BFCCC0
≈ Paris White
- B9CCCF
≈ Sleepy Blue
Triadique +120° +240°
- BACDC8
Coast to Coast
- C9C5D5
≈ Amourette
- D3C5BB
≈ Christobel
Complémentaire divisée +150° +210°
- BACDC8
Coast to Coast
- D0C3CF
≈ Amethyst Light Violet
- D6C3C0
≈ Just Gorgeous
Tétradique +90° +180° +270°
- BACDC8
Coast to Coast
- C2C8D7
≈ Hyacinth White Soft Blue
- D5C3C8
≈ Victorian Cottage
- CEC8B9
≈ Beige Royal
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.65:1 · APCA Lc 29
Ag
AAASur noir
WCAG 12.65:1 · APCA Lc 74
Meilleure couleur de texte: #000000
WCAG 12.65:1 (AAA) · APCA Lc 74
Contrast pairs
Extraits de code
CSS
:root {
--coast-to-coast: #bacdc8;
--coast-to-coast-rgb: 186 205 200;
--coast-to-coast-oklch: oklch(0.832 0.022 178.2);
}
.element {
color: var(--coast-to-coast);
background-color: hsl(164 16% 77%);
border-color: oklch(0.832 0.022 178.2);
}Tailwind CSS v4
@theme {
--color-coast-to-coast: #bacdc8;
--color-coast-to-coast-50: #eff7f5;
--color-coast-to-coast-100: #e1eae8;
--color-coast-to-coast-200: #cbd7d4;
--color-coast-to-coast-300: #acbbb8;
--color-coast-to-coast-400: #92a39e;
--color-coast-to-coast-500: #778b86;
--color-coast-to-coast-600: #657671;
--color-coast-to-coast-700: #515e5b;
--color-coast-to-coast-800: #3b4542;
--color-coast-to-coast-900: #28302e;
--color-coast-to-coast-950: #161c1a;
}SCSS
$coast-to-coast: #bacdc8;
$coast-to-coast-rgb: 186, 205, 200;
$coast-to-coast-light: mix(#fff, $coast-to-coast, 20%);
$coast-to-coast-dark: mix(#000, $coast-to-coast, 20%);
.element {
color: $coast-to-coast;
box-shadow: 0 0 0 2px rgba($coast-to-coast, 0.35);
}