En yakın adlandırılmış renk · #3F6773
#3F6773
En yakın adlandırılmış renk: Ocean’s Embrace
#3F6773 (rgb(63 103 115), hsl(194 29% 35%), oklch(0.489 0.049 218.9)) 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.
#3F6773
oklch(0.489 0.049 218.9)
Renk dönüşümleri
- HEX
- #3f6773
- RGB
- rgb(63 103 115)
- HSL
- hsl(194 29% 35%)
- HWB
- hwb(194 25% 55%)
- OKLCH
- oklch(0.489 0.049 218.9)
- OKLab
- oklab(0.489 -0.038 -0.031)
- CIE Lab
- lab(41.01 -12.03 -11.45)
- LCH
- lch(41.01 16.61 223.6)
- CMYK
- cmyk(45% 10% 0% 55%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 517580
- 64848E
- 76929B
- 89A1A9
- 9CB0B7
- AFC0C5
- C3CFD3
- D7DFE2
- EBEFF0
Koyu tonlar
- 355963
- 2C4B54
- 233D45
- 1B3036
- 122328
- 0A171B
- 040C0F
- 010405
- 000001
Gri tonlar
- 466A74
- 4D6C76
- 546F77
- 5A7178
- 61747A
- 67767B
- 6D797C
- 747B7E
- 7A7E7F
Renk uyumları
Tamamlayıcı +180°
- 3F6773
Ocean’s Embrace
- 79574C
≈ Roxy Brown
Analog -30° +30°
- 3F6773
Ocean’s Embrace
- 3E6966
≈ Betta Fish
- 4A637B
≈ Stellar
Üçlü +120° +240°
- 3F6773
Ocean’s Embrace
- 735669
≈ Hothouse Orchid
- 676140
≈ Glossy Olive
Bölünmüş tamamlayıcı +150° +210°
- 3F6773
Ocean’s Embrace
- 79555A
≈ Czarina
- 735B42
≈ Wooden Cabin
Dörtlü +90° +180° +270°
- 3F6773
Ocean’s Embrace
- 685976
≈ Plummy
- 79574C
≈ Roxy Brown
- 586648
≈ Jalapeño Bouquet
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 6.17:1 · APCA Lc 81
Ag
FailSiyah üzerinde
WCAG 3.39:1 · APCA Lc 21
En iyi metin rengi: #FFFFFF
WCAG 6.17:1 (AA) · APCA Lc 81
Contrast pairs
Kod parçacıkları
CSS
:root {
--ocean-s-embrace: #3f6773;
--ocean-s-embrace-rgb: 63 103 115;
--ocean-s-embrace-oklch: oklch(0.489 0.049 218.9);
}
.element {
color: var(--ocean-s-embrace);
background-color: hsl(194 29% 35%);
border-color: oklch(0.489 0.049 218.9);
}Tailwind CSS v4
@theme {
--color-ocean-s-embrace: #3f6773;
--color-ocean-s-embrace-50: #e7f9ff;
--color-ocean-s-embrace-100: #d7ecf3;
--color-ocean-s-embrace-200: #bedae3;
--color-ocean-s-embrace-300: #9dbec9;
--color-ocean-s-embrace-400: #7ea6b2;
--color-ocean-s-embrace-500: #618e9c;
--color-ocean-s-embrace-600: #527884;
--color-ocean-s-embrace-700: #42606a;
--color-ocean-s-embrace-800: #2f474d;
--color-ocean-s-embrace-900: #203136;
--color-ocean-s-embrace-950: #0f1d21;
}SCSS
$ocean-s-embrace: #3f6773;
$ocean-s-embrace-rgb: 63, 103, 115;
$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);
}