命名颜色 · #505D74

Vintage Indigo

Vintage Indigo 即 #505D74：rgb(80 93 116)、hsl(218 18% 38%)、oklch(0.476 0.041 261.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Blue mean? → · Vintage Indigo color name →

#505D74

oklch(0.476 0.041 261.8)

颜色转换

HEX: #505d74
RGB: rgb(80 93 116)
HSL: hsl(218 18% 38%)
HWB: hwb(218 31% 55%)
OKLCH: oklch(0.476 0.041 261.8)
OKLab: oklab(0.476 -0.006 -0.04)
CIE Lab: lab(39.05 -0.74 -14.86)
LCH: lch(39.05 14.88 267.1)
CMYK: cmyk(31% 20% 0% 55%)

浅色调 · 深色调 · 灰色调

浅色调

606C81
707B8E
818B9C
929AAA
A3ABB7
B5BBC5
C7CCD4
D9DDE2
ECEEF0

深色调

445064
394354
2E3745
242A37
1A1F29
10141B
070A0F
020305
000001

灰色调

556075
596477
5E6778
636B79
686E7A
6C727C
71757D
76797E
7B7C7F

配色和谐

互补色 +180°

505D74
Vintage Indigo
685B42
≈ Cold Pressed

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

四角配色 +90° +180° +270°

对比度与无障碍

白底

WCAG 6.64:1 · APCA Lc 83

黑底

WCAG 3.15:1 · APCA Lc 19

Fail

最佳文字颜色: #FFFFFF

WCAG 6.64:1 (AA) · APCA Lc 83

Contrast pairs

代码片段

CSS

:root {
  --vintage-indigo: #505d74;
  --vintage-indigo-rgb: 80 93 116;
  --vintage-indigo-oklch: oklch(0.476 0.041 261.8);
}

.element {
  color: var(--vintage-indigo);
  background-color: hsl(218 18% 38%);
  border-color: oklch(0.476 0.041 261.8);
}

Tailwind CSS v4

@theme {
  --color-vintage-indigo: #505d74;
  --color-vintage-indigo-50: #eff5ff;
  --color-vintage-indigo-100: #e1e8f6;
  --color-vintage-indigo-200: #cbd5e6;
  --color-vintage-indigo-300: #adb8cd;
  --color-vintage-indigo-400: #919fb7;
  --color-vintage-indigo-500: #7787a2;
  --color-vintage-indigo-600: #657289;
  --color-vintage-indigo-700: #515b6e;
  --color-vintage-indigo-800: #3a4351;
  --color-vintage-indigo-900: #282e38;
  --color-vintage-indigo-950: #161b23;
}

SCSS

$vintage-indigo: #505d74;
$vintage-indigo-rgb: 80, 93, 116;
$vintage-indigo-light: mix(#fff, $vintage-indigo, 20%);
$vintage-indigo-dark: mix(#000, $vintage-indigo, 20%);

.element {
  color: $vintage-indigo;
  box-shadow: 0 0 0 2px rgba($vintage-indigo, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

取色器配色组合对比度检测 Studio JSON API