En yakın adlandırılmış renk · #3A6B77
#3A6B77
En yakın adlandırılmış renk: Ocean’s Embrace
#3A6B77 (rgb(58 107 119), hsl(192 34% 35%), oklch(0.498 0.056 215.4)) en çok Ocean’s Embrace adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#3A6B77
oklch(0.498 0.056 215.4)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 4E7984
- 618791
- 74959E
- 87A4AB
- 9AB3B9
- AEC1C7
- C2D1D5
- D6E0E3
- EAEFF1
Koyu tonlar
- 315C67
- 284E57
- 203F47
- 183238
- 10252A
- 09181C
- 040D10
- 010405
- 000001
Gri tonlar
- 426D78
- 4A6F79
- 51727A
- 58747B
- 5F767C
- 66787D
- 6D7A7D
- 737C7E
- 7A7E7F
Renk uyumları
Tamamlayıcı +180°
- 3A6B77
Ocean’s Embrace
- 7F574D
≈ Root Beer
Analog -30° +30°
- 3A6B77
Ocean’s Embrace
- 3A6D67
≈ Deep Pool Teal
- 476681
≈ Stellar
Üçlü +120° +240°
- 3A6B77
Ocean’s Embrace
- 77576F
≈ Exotic Orchid
- 6C633D
≈ Bronze Medal
Bölünmüş tamamlayıcı +150° +210°
- 3A6B77
Ocean’s Embrace
- 7F555E
≈ Rose Branch
- 795C40
≈ Wooden Cabin
Dörtlü +90° +180° +270°
- 3A6B77
Ocean’s Embrace
- 6A5B7D
≈ Napa Winery
- 7F574D
≈ Root Beer
- 5B6945
≈ Baby Vegetable
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 5.91:1 · APCA Lc 79
Ag
FailSiyah üzerinde
WCAG 3.54:1 · APCA Lc 22
En iyi metin rengi: #FFFFFF
WCAG 5.91:1 (AA) · APCA Lc 79
Contrast pairs
Kod parçacıkları
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);
}