Couleur nommée · #DDFFDD
Transparent Green
Transparent Green correspond à #DDFFDD : rgb(221 255 221), hsl(120 100% 93%), oklch(0.967 0.057 145.1). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Green mean? → · Transparent Green color name →
#DDFFDD
oklch(0.967 0.057 145.1)
Conversions de couleur
- HEX
- #ddffdd
- RGB
- rgb(221 255 221)
- HSL
- hsl(120 100% 93%)
- HWB
- hwb(120 87% 0%)
- OKLCH
- oklch(0.967 0.057 145.1)
- OKLab
- oklab(0.967 -0.047 0.033)
- CIE Lab
- lab(96.89 -15.99 12.46)
- LCH
- lch(96.89 20.28 142.1)
- CMYK
- cmyk(13% 0% 13% 0%)
Teintes · Ombres · Tons
Teintes
- E0FFE0
- E4FFE4
- E7FFE7
- EBFFEB
- EEFFEE
- F2FFF1
- F5FFF5
- F8FFF8
- FCFFFC
Ombres
- C0DEC0
- A4BEA4
- 889E88
- 6E806E
- 556355
- 3D483D
- 262E26
- 111611
- 020302
Tons
- D3F2D3
- CAE4CA
- C0D7C0
- B7CAB7
- AEBEAD
- A4B1A4
- 9BA49B
- 929892
- 898C89
Harmonies de couleurs
Complémentaire +180°
- DDFFDD
Transparent Green
- FFEEFF
≈ Lovely Euphoric Delight
Analogue -30° +30°
- DDFFDD
Transparent Green
- F2F9CE
≈ Carla
- D5FFF2
≈ Candied Snow
Triadique +120° +240°
- DDFFDD
Transparent Green
- EFF4FF
≈ Placebo Blue
- FFF0EE
≈ Sefid White
Complémentaire divisée +150° +210°
- DDFFDD
Transparent Green
- F5F2FF
≈ Cloud Break
- FFEFF4
≈ Powder Puff
Tétradique +90° +180° +270°
- DDFFDD
Transparent Green
- E9F6FF
≈ Kodama White
- FFEEFF
≈ Lovely Euphoric Delight
- FFF1E8
≈ Pico Ivory
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.08:1 · APCA Lc 0
Ag
AAASur noir
WCAG 19.42:1 · APCA Lc 102
Meilleure couleur de texte: #000000
WCAG 19.42:1 (AAA) · APCA Lc 102
Contrast pairs
Extraits de code
CSS
:root {
--transparent-green: #ddffdd;
--transparent-green-rgb: 221 255 221;
--transparent-green-oklch: oklch(0.967 0.057 145.1);
}
.element {
color: var(--transparent-green);
background-color: hsl(120 100% 93%);
border-color: oklch(0.967 0.057 145.1);
}Tailwind CSS v4
@theme {
--color-transparent-green: #ddffdd;
--color-transparent-green-50: #ebfaec;
--color-transparent-green-100: #dceddd;
--color-transparent-green-200: #c5dbc6;
--color-transparent-green-300: #a5c0a7;
--color-transparent-green-400: #8aa88a;
--color-transparent-green-500: #6f916f;
--color-transparent-green-600: #5e7a5e;
--color-transparent-green-700: #4b624b;
--color-transparent-green-800: #374836;
--color-transparent-green-900: #253225;
--color-transparent-green-950: #141e13;
}SCSS
$transparent-green: #ddffdd;
$transparent-green-rgb: 221, 255, 221;
$transparent-green-light: mix(#fff, $transparent-green, 20%);
$transparent-green-dark: mix(#000, $transparent-green, 20%);
.element {
color: $transparent-green;
box-shadow: 0 0 0 2px rgba($transparent-green, 0.35);
}