En yakın adlandırılmış renk · #20577C
#20577C
En yakın adlandırılmış renk: 3AM in Shibuya
#20577C (rgb(32 87 124), hsl(204 59% 31%), oklch(0.439 0.084 241.8)) en çok 3AM in Shibuya 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.
#20577C
oklch(0.439 0.084 241.8)
Renk dönüşümleri
- HEX
- #20577c
- RGB
- rgb(32 87 124)
- HSL
- hsl(204 59% 31%)
- HWB
- hwb(204 13% 51%)
- OKLCH
- oklch(0.439 0.084 241.8)
- OKLab
- oklab(0.439 -0.039 -0.074)
- CIE Lab
- lab(34.75 -8.37 -26.64)
- LCH
- lch(34.75 27.92 252.6)
- CMYK
- cmyk(74% 30% 0% 51%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 386789
- 4E7796
- 6387A3
- 7898B0
- 8EA8BD
- A4B9CA
- BACAD7
- D1DCE4
- E8EDF2
Koyu tonlar
- 1A4B6B
- 153E5A
- 0F334A
- 0A273B
- 061C2C
- 03121E
- 010811
- 000305
- 000001
Gri tonlar
- 2C5B7D
- 37607D
- 41647E
- 4A687F
- 546C7F
- 5D707F
- 667480
- 6E7880
- 777C80
Renk uyumları
Tamamlayıcı +180°
- 20577C
3AM in Shibuya
- 73461B
≈ Vintage Wood
Analog -30° +30°
- 20577C
3AM in Shibuya
- 005D6A
≈ Hero
- 424E80
≈ Dive In
Üçlü +120° +240°
- 20577C
3AM in Shibuya
- 773D4F
≈ Vintage Merlot
- 4B591F
≈ Obscure Olive
Bölünmüş tamamlayıcı +150° +210°
- 20577C
3AM in Shibuya
- 793F34
≈ Aged Teak
- 63500D
≈ Olive Brown
Dörtlü +90° +180° +270°
- 20577C
3AM in Shibuya
- 6D4067
≈ Burnt Orchid
- 73461B
≈ Vintage Wood
- 295F3A
≈ Midori
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 7.73:1 · APCA Lc 87
Ag
FailSiyah üzerinde
WCAG 2.71:1 · APCA Lc 15
En iyi metin rengi: #FFFFFF
WCAG 7.73:1 (AAA) · APCA Lc 87
Contrast pairs
Kod parçacıkları
CSS
:root {
--color-3am-in-shibuya: #20577c;
--color-3am-in-shibuya-rgb: 32 87 124;
--color-3am-in-shibuya-oklch: oklch(0.439 0.084 241.8);
}
.element {
color: var(--color-3am-in-shibuya);
background-color: hsl(204 59% 31%);
border-color: oklch(0.439 0.084 241.8);
}Tailwind CSS v4
@theme {
--color-color-3am-in-shibuya: #20577c;
--color-color-3am-in-shibuya-50: #e2f9ff;
--color-color-3am-in-shibuya-100: #d1ecff;
--color-color-3am-in-shibuya-200: #b7d9f6;
--color-color-3am-in-shibuya-300: #93bde0;
--color-color-3am-in-shibuya-400: #71a5cc;
--color-color-3am-in-shibuya-500: #508db9;
--color-color-3am-in-shibuya-600: #45779c;
--color-color-3am-in-shibuya-700: #375f7d;
--color-color-3am-in-shibuya-800: #25465c;
--color-color-3am-in-shibuya-900: #193141;
--color-color-3am-in-shibuya-950: #091d29;
}SCSS
$color-3am-in-shibuya: #20577c;
$color-3am-in-shibuya-rgb: 32, 87, 124;
$color-3am-in-shibuya-light: mix(#fff, $color-3am-in-shibuya, 20%);
$color-3am-in-shibuya-dark: mix(#000, $color-3am-in-shibuya, 20%);
.element {
color: $color-3am-in-shibuya;
box-shadow: 0 0 0 2px rgba($color-3am-in-shibuya, 0.35);
}