Colore con nome · #3EAF76
Link’s Awakening
Link’s Awakening è #3EAF76: rgb(62 175 118), hsl(150 48% 46%), oklch(0.675 0.133 157.6). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Green mean? → · Link’s Awakening color name →
#3EAF76
oklch(0.675 0.133 157.6)
Conversioni di colore
- HEX
- #3eaf76
- RGB
- rgb(62 175 118)
- HSL
- hsl(150 48% 46%)
- HWB
- hwb(150 24% 31%)
- OKLCH
- oklch(0.675 0.133 157.6)
- OKLab
- oklab(0.675 -0.123 0.051)
- CIE Lab
- lab(64.08 -43.39 19.56)
- LCH
- lch(64.08 47.6 155.7)
- CMYK
- cmyk(65% 0% 33% 31%)
Tinte · Ombre · Toni
Tinte
- 57B783
- 6DBF91
- 81C79E
- 94CFAB
- A6D7B9
- B8DFC7
- CAE7D5
- DCEFE3
- EDF7F1
Ombre
- 359866
- 2B8156
- 236B47
- 1A5638
- 124129
- 0A2E1C
- 041C0F
- 010B05
- 000101
Toni
- 4AAA77
- 53A678
- 5CA17A
- 639D7B
- 69987C
- 6E937D
- 738F7E
- 788A7E
- 7C857F
Armonie di colore
Complementare +180°
- 3EAF76
Link’s Awakening
- CA75B4
≈ Sky Magenta
Analogo -30° +30°
- 3EAF76
Link’s Awakening
- 80A645
≈ Greenery
- 00AEA4
≈ Cozumel
Triadico +120° +240°
- 3EAF76
Link’s Awakening
- 848DE7
≈ Perrywinkle
- DB7758
≈ Peachy Scene
Complementare divisa +150° +210°
- 3EAF76
Link’s Awakening
- AD7FD6
≈ Lavender Blossom
- DA7188
≈ Luminous Pink
Tetradico +90° +180° +270°
- 3EAF76
Link’s Awakening
- 4A9DE4
≈ Perfect Days
- CA75B4
≈ Sky Magenta
- CC852A
≈ Harvest at Dusk
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.76:1 · APCA Lc 53
Ag
AAASu nero
WCAG 7.59:1 · APCA Lc 49
Miglior colore del testo: #000000
WCAG 7.59:1 (AAA) · APCA Lc 49
Contrast pairs
Frammenti di codice
CSS
:root {
--link-s-awakening: #3eaf76;
--link-s-awakening-rgb: 62 175 118;
--link-s-awakening-oklch: oklch(0.675 0.133 157.6);
}
.element {
color: var(--link-s-awakening);
background-color: hsl(150 48% 46%);
border-color: oklch(0.675 0.133 157.6);
}Tailwind CSS v4
@theme {
--color-link-s-awakening: #3eaf76;
--color-link-s-awakening-50: #d6ffe8;
--color-link-s-awakening-100: #c2f6d8;
--color-link-s-awakening-200: #a2e6c0;
--color-link-s-awakening-300: #77cc9f;
--color-link-s-awakening-400: #4eb67f;
--color-link-s-awakening-500: #00a062;
--color-link-s-awakening-600: #0d8753;
--color-link-s-awakening-700: #0c6c42;
--color-link-s-awakening-800: #0c4f2e;
--color-link-s-awakening-900: #08371f;
--color-link-s-awakening-950: #00220f;
}SCSS
$link-s-awakening: #3eaf76;
$link-s-awakening-rgb: 62, 175, 118;
$link-s-awakening-light: mix(#fff, $link-s-awakening, 20%);
$link-s-awakening-dark: mix(#000, $link-s-awakening, 20%);
.element {
color: $link-s-awakening;
box-shadow: 0 0 0 2px rgba($link-s-awakening, 0.35);
}