En yakın adlandırılmış renk · #387FB9
#387FB9
En yakın adlandırılmış renk: Haddock’s Sweater
#387FB9 (rgb(56 127 185), hsl(207 54% 47%), oklch(0.578 0.114 246.3)) en çok Haddock’s Sweater 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.
#387FB9
oklch(0.578 0.114 246.3)
Renk dönüşümleri
- HEX
- #387fb9
- RGB
- rgb(56 127 185)
- HSL
- hsl(207 54% 47%)
- HWB
- hwb(207 22% 27%)
- OKLCH
- oklch(0.578 0.114 246.3)
- OKLab
- oklab(0.578 -0.046 -0.105)
- CIE Lab
- lab(50.73 -8.15 -37.7)
- LCH
- lch(50.73 38.57 257.8)
- CMYK
- cmyk(70% 31% 0% 27%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 4E8CC1
- 6298C8
- 76A5CF
- 8AB2D6
- 9DBFDD
- B0CBE4
- C4D8EB
- D7E5F2
- EBF2F8
Koyu tonlar
- 2F6EA0
- 275D89
- 1F4C71
- 173C5B
- 0F2D46
- 081F31
- 04111E
- 01060D
- 000102
Gri tonlar
- 4280B4
- 4B80AE
- 5380A9
- 5A81A3
- 61819D
- 688198
- 6E8192
- 74818C
- 7A8086
Renk uyumları
Tamamlayıcı +180°
- 387FB9
Haddock’s Sweater
- A76A21
≈ Theatre Gold
Analog -30° +30°
- 387FB9
Haddock’s Sweater
- 0088A1
≈ Gogo Blue
- 6872BD
≈ Wind Star
Üçlü +120° +240°
- 387FB9
Haddock’s Sweater
- B15A6F
≈ Slate Pink
- 688634
≈ Sun Valley
Bölünmüş tamamlayıcı +150° +210°
- 387FB9
Haddock’s Sweater
- B25F48
≈ Karacha Red
- 8E7911
≈ Jīn Zōng Gold
Dörtlü +90° +180° +270°
- 387FB9
Haddock’s Sweater
- A35E93
≈ Thimble Red
- A76A21
≈ Theatre Gold
- 338D5D
≈ Irish
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.28:1 · APCA Lc 69
Ag
AASiyah üzerinde
WCAG 4.90:1 · APCA Lc 32
En iyi metin rengi: #000000
WCAG 4.90:1 (AA) · APCA Lc 32
Contrast pairs
Kod parçacıkları
CSS
:root {
--haddock-s-sweater: #387fb9;
--haddock-s-sweater-rgb: 56 127 185;
--haddock-s-sweater-oklch: oklch(0.578 0.114 246.3);
}
.element {
color: var(--haddock-s-sweater);
background-color: hsl(207 54% 47%);
border-color: oklch(0.578 0.114 246.3);
}Tailwind CSS v4
@theme {
--color-haddock-s-sweater: #387fb9;
--color-haddock-s-sweater-50: #dcf9ff;
--color-haddock-s-sweater-100: #cbecff;
--color-haddock-s-sweater-200: #aed9ff;
--color-haddock-s-sweater-300: #88bdf0;
--color-haddock-s-sweater-400: #62a5de;
--color-haddock-s-sweater-500: #3c8ccd;
--color-haddock-s-sweater-600: #3476ad;
--color-haddock-s-sweater-700: #295f8b;
--color-haddock-s-sweater-800: #1a4667;
--color-haddock-s-sweater-900: #113048;
--color-haddock-s-sweater-950: #031c2f;
}SCSS
$haddock-s-sweater: #387fb9;
$haddock-s-sweater-rgb: 56, 127, 185;
$haddock-s-sweater-light: mix(#fff, $haddock-s-sweater, 20%);
$haddock-s-sweater-dark: mix(#000, $haddock-s-sweater, 20%);
.element {
color: $haddock-s-sweater;
box-shadow: 0 0 0 2px rgba($haddock-s-sweater, 0.35);
}