Couleur nommée · #D2D2D4
Rapunzel Silver
Rapunzel Silver correspond à #D2D2D4 : rgb(210 210 212), hsl(240 2% 83%), oklch(0.864 0.003 286.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Rapunzel Silver color name →
#D2D2D4
oklch(0.864 0.003 286.3)
Conversions de couleur
- HEX
- #d2d2d4
- RGB
- rgb(210 210 212)
- HSL
- hsl(240 2% 83%)
- HWB
- hwb(240 82% 17%)
- OKLCH
- oklch(0.864 0.003 286.3)
- OKLab
- oklab(0.864 0.001 -0.003)
- CIE Lab
- lab(84.24 0.27 -0.99)
- LCH
- lch(84.24 1.03 285.3)
- CMYK
- cmyk(1% 1% 0% 17%)
Teintes · Ombres · Tons
Teintes
- D6D6D8
- DBDBDC
- DFDFE1
- E4E4E5
- E8E8E9
- EDEDEE
- F1F1F2
- F6F6F6
- FAFAFB
Ombres
- B6B6B8
- 9B9B9D
- 818183
- 686869
- 505051
- 39393A
- 242424
- 101010
- 020202
Tons
- C9C9CB
- C1C1C3
- B9B9BA
- B0B0B1
- A8A8A9
- A0A0A1
- 989898
- 909090
- 888888
Harmonies de couleurs
Complémentaire +180°
- D2D2D4
Rapunzel Silver
- D2D2D0
≈ Blowing Smoke
Analogue -30° +30°
- D2D2D4
Rapunzel Silver
- D1D2D4
≈ Rapunzel Silver
- D3D2D3
≈ Rapunzel Silver
Triadique +120° +240°
- D2D2D4
Rapunzel Silver
- D4D2D1
≈ Day on Mercury
- D1D3D2
≈ Elemental
Complémentaire divisée +150° +210°
- D2D2D4
Rapunzel Silver
- D3D2D0
≈ Blowing Smoke
- D1D3D1
≈ Sterling
Tétradique +90° +180° +270°
- D2D2D4
Rapunzel Silver
- D4D2D2
≈ Day on Mercury
- D2D2D0
≈ Blowing Smoke
- D0D3D3
≈ Elemental
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.50:1 · APCA Lc 24
Ag
AAASur noir
WCAG 13.90:1 · APCA Lc 79
Meilleure couleur de texte: #000000
WCAG 13.90:1 (AAA) · APCA Lc 79
Contrast pairs
Extraits de code
CSS
:root {
--rapunzel-silver: #d2d2d4;
--rapunzel-silver-rgb: 210 210 212;
--rapunzel-silver-oklch: oklch(0.864 0.003 286.3);
}
.element {
color: var(--rapunzel-silver);
background-color: hsl(240 2% 83%);
border-color: oklch(0.864 0.003 286.3);
}Tailwind CSS v4
@theme {
--color-rapunzel-silver: #d2d2d4;
--color-rapunzel-silver-50: #f5f5f6;
--color-rapunzel-silver-100: #e8e8e9;
--color-rapunzel-silver-200: #d4d4d5;
--color-rapunzel-silver-300: #b7b7b9;
--color-rapunzel-silver-400: #9e9ea0;
--color-rapunzel-silver-500: #868688;
--color-rapunzel-silver-600: #717173;
--color-rapunzel-silver-700: #5b5b5c;
--color-rapunzel-silver-800: #424243;
--color-rapunzel-silver-900: #2e2e2e;
--color-rapunzel-silver-950: #1a1a1b;
}SCSS
$rapunzel-silver: #d2d2d4;
$rapunzel-silver-rgb: 210, 210, 212;
$rapunzel-silver-light: mix(#fff, $rapunzel-silver, 20%);
$rapunzel-silver-dark: mix(#000, $rapunzel-silver, 20%);
.element {
color: $rapunzel-silver;
box-shadow: 0 0 0 2px rgba($rapunzel-silver, 0.35);
}