Colore con nome · #546670
Needlepoint Navy
Needlepoint Navy è #546670: rgb(84 102 112), hsl(201 14% 38%), oklch(0.499 0.027 232.4). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Needlepoint Navy color name →
#546670
oklch(0.499 0.027 232.4)
Conversioni di colore
- HEX
- #546670
- RGB
- rgb(84 102 112)
- HSL
- hsl(201 14% 38%)
- HWB
- hwb(201 33% 56%)
- OKLCH
- oklch(0.499 0.027 232.4)
- OKLab
- oklab(0.499 -0.017 -0.021)
- CIE Lab
- lab(41.97 -5.18 -8.03)
- LCH
- lch(41.97 9.55 237.2)
- CMYK
- cmyk(25% 9% 0% 56%)
Tinte · Ombre · Toni
Tinte
- 64747D
- 74838B
- 849199
- 95A0A7
- A6AFB5
- B7BFC3
- C9CFD2
- DBDFE1
- EDEFF0
Ombre
- 485860
- 3C4A51
- 313C43
- 262F35
- 1B2327
- 11171A
- 080C0E
- 020404
- 000001
Toni
- 586972
- 5D6B73
- 616E75
- 667076
- 6A7378
- 6E767A
- 73787B
- 777B7D
- 7C7D7E
Armonie di colore
Complementare +180°
- 546670
Needlepoint Navy
- 705F55
≈ Dorado
Analogo -30° +30°
- 546670
Needlepoint Navy
- 51686A
≈ Iron Creek
- 5B6373
≈ Pencil Lead
Triadico +120° +240°
- 546670
Needlepoint Navy
- 705D64
≈ Impromptu
- 636553
≈ Winning Ticket
Complementare divisa +150° +210°
- 546670
Needlepoint Navy
- 725D5C
≈ Peppercorn
- 6B6252
≈ Harold
Tetradico +90° +180° +270°
- 546670
Needlepoint Navy
- 6B5E6C
≈ Fiji Coral
- 705F55
≈ Dorado
- 5A6759
≈ Deep Bottlebrush
Contrasto e accessibilità
Ag
AASu bianco
WCAG 5.98:1 · APCA Lc 80
Ag
FailSu nero
WCAG 3.51:1 · APCA Lc 22
Miglior colore del testo: #FFFFFF
WCAG 5.98:1 (AA) · APCA Lc 80
Contrast pairs
Frammenti di codice
CSS
:root {
--needlepoint-navy: #546670;
--needlepoint-navy-rgb: 84 102 112;
--needlepoint-navy-oklch: oklch(0.499 0.027 232.4);
}
.element {
color: var(--needlepoint-navy);
background-color: hsl(201 14% 38%);
border-color: oklch(0.499 0.027 232.4);
}Tailwind CSS v4
@theme {
--color-needlepoint-navy: #546670;
--color-needlepoint-navy-50: #eef7fc;
--color-needlepoint-navy-100: #e0eaf0;
--color-needlepoint-navy-200: #cad6de;
--color-needlepoint-navy-300: #abbac3;
--color-needlepoint-navy-400: #8fa2ac;
--color-needlepoint-navy-500: #758a95;
--color-needlepoint-navy-600: #63757e;
--color-needlepoint-navy-700: #4f5d65;
--color-needlepoint-navy-800: #39444a;
--color-needlepoint-navy-900: #272f33;
--color-needlepoint-navy-950: #151c1f;
}SCSS
$needlepoint-navy: #546670;
$needlepoint-navy-rgb: 84, 102, 112;
$needlepoint-navy-light: mix(#fff, $needlepoint-navy, 20%);
$needlepoint-navy-dark: mix(#000, $needlepoint-navy, 20%);
.element {
color: $needlepoint-navy;
box-shadow: 0 0 0 2px rgba($needlepoint-navy, 0.35);
}