أقرب لون مسمّى · #20577C
#20577C
أقرب لون مسمّى: 3AM in Shibuya
#20577C (rgb(32 87 124)، hsl(204 59% 31%)، oklch(0.439 0.084 241.8)) أقرب إلى اللون المسمّى 3AM in Shibuya. شاهد الدرجات الفاتحة والداكنة والتناسقات وتباين WCAG وAPCA وأكواد CSS وTailwind v4 وSCSS.
#20577C
oklch(0.439 0.084 241.8)
تحويلات الألوان
- 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%)
درجات فاتحة · درجات داكنة · درجات رمادية
درجات فاتحة
- 386789
- 4E7796
- 6387A3
- 7898B0
- 8EA8BD
- A4B9CA
- BACAD7
- D1DCE4
- E8EDF2
درجات داكنة
- 1A4B6B
- 153E5A
- 0F334A
- 0A273B
- 061C2C
- 03121E
- 010811
- 000305
- 000001
درجات رمادية
- 2C5B7D
- 37607D
- 41647E
- 4A687F
- 546C7F
- 5D707F
- 667480
- 6E7880
- 777C80
تناسق الألوان
متمم +180°
- 20577C
3AM in Shibuya
- 73461B
≈ Vintage Wood
متجاور -30° +30°
- 20577C
3AM in Shibuya
- 005D6A
≈ Hero
- 424E80
≈ Dive In
ثلاثي +120° +240°
- 20577C
3AM in Shibuya
- 773D4F
≈ Vintage Merlot
- 4B591F
≈ Obscure Olive
متمم منقسم +150° +210°
- 20577C
3AM in Shibuya
- 793F34
≈ Aged Teak
- 63500D
≈ Olive Brown
رباعي +90° +180° +270°
- 20577C
3AM in Shibuya
- 6D4067
≈ Burnt Orchid
- 73461B
≈ Vintage Wood
- 295F3A
≈ Midori
التباين وإمكانية الوصول
Ag
AAAعلى الأبيض
WCAG 7.73:1 · APCA Lc 87
Ag
Failعلى الأسود
WCAG 2.71:1 · APCA Lc 15
أفضل لون للنص: #FFFFFF
WCAG 7.73:1 (AAA) · APCA Lc 87
Contrast pairs
مقتطفات الأكواد
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);
}