Couleur nommée la plus proche · #3A6B77
#3A6B77
Couleur nommée la plus proche: Ocean’s Embrace
#3A6B77 (rgb(58 107 119), hsl(192 34% 35%), oklch(0.498 0.056 215.4)) est la plus proche de la couleur nommée Ocean’s Embrace. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#3A6B77
oklch(0.498 0.056 215.4)
Conversions de couleur
- HEX
- #3a6b77
- RGB
- rgb(58 107 119)
- HSL
- hsl(192 34% 35%)
- HWB
- hwb(192 23% 53%)
- OKLCH
- oklch(0.498 0.056 215.4)
- OKLab
- oklab(0.498 -0.046 -0.033)
- CIE Lab
- lab(42.15 -14.61 -12.17)
- LCH
- lch(42.15 19.01 219.8)
- CMYK
- cmyk(51% 10% 0% 53%)
Teintes · Ombres · Tons
Teintes
- 4E7984
- 618791
- 74959E
- 87A4AB
- 9AB3B9
- AEC1C7
- C2D1D5
- D6E0E3
- EAEFF1
Ombres
- 315C67
- 284E57
- 203F47
- 183238
- 10252A
- 09181C
- 040D10
- 010405
- 000001
Tons
- 426D78
- 4A6F79
- 51727A
- 58747B
- 5F767C
- 66787D
- 6D7A7D
- 737C7E
- 7A7E7F
Harmonies de couleurs
Complémentaire +180°
- 3A6B77
Ocean’s Embrace
- 7F574D
≈ Root Beer
Analogue -30° +30°
- 3A6B77
Ocean’s Embrace
- 3A6D67
≈ Deep Pool Teal
- 476681
≈ Stellar
Triadique +120° +240°
- 3A6B77
Ocean’s Embrace
- 77576F
≈ Exotic Orchid
- 6C633D
≈ Bronze Medal
Complémentaire divisée +150° +210°
- 3A6B77
Ocean’s Embrace
- 7F555E
≈ Rose Branch
- 795C40
≈ Wooden Cabin
Tétradique +90° +180° +270°
- 3A6B77
Ocean’s Embrace
- 6A5B7D
≈ Napa Winery
- 7F574D
≈ Root Beer
- 5B6945
≈ Baby Vegetable
Contraste et accessibilité
Ag
AASur blanc
WCAG 5.91:1 · APCA Lc 79
Ag
FailSur noir
WCAG 3.54:1 · APCA Lc 22
Meilleure couleur de texte: #FFFFFF
WCAG 5.91:1 (AA) · APCA Lc 79
Contrast pairs
Extraits de code
CSS
:root {
--ocean-s-embrace: #3a6b77;
--ocean-s-embrace-rgb: 58 107 119;
--ocean-s-embrace-oklch: oklch(0.498 0.056 215.4);
}
.element {
color: var(--ocean-s-embrace);
background-color: hsl(192 34% 35%);
border-color: oklch(0.498 0.056 215.4);
}Tailwind CSS v4
@theme {
--color-ocean-s-embrace: #3a6b77;
--color-ocean-s-embrace-50: #e4faff;
--color-ocean-s-embrace-100: #d4edf4;
--color-ocean-s-embrace-200: #badbe4;
--color-ocean-s-embrace-300: #98bfca;
--color-ocean-s-embrace-400: #78a7b4;
--color-ocean-s-embrace-500: #59909e;
--color-ocean-s-embrace-600: #4c7a85;
--color-ocean-s-embrace-700: #3c616b;
--color-ocean-s-embrace-800: #2a484e;
--color-ocean-s-embrace-900: #1d3236;
--color-ocean-s-embrace-950: #0c1e21;
}SCSS
$ocean-s-embrace: #3a6b77;
$ocean-s-embrace-rgb: 58, 107, 119;
$ocean-s-embrace-light: mix(#fff, $ocean-s-embrace, 20%);
$ocean-s-embrace-dark: mix(#000, $ocean-s-embrace, 20%);
.element {
color: $ocean-s-embrace;
box-shadow: 0 0 0 2px rgba($ocean-s-embrace, 0.35);
}