命名颜色 · #D4574E
Valencia
Valencia 即 #D4574E：rgb(212 87 78)、hsl(4 61% 57%)、oklch(0.616 0.16 26.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Valencia color name →
#D4574E
oklch(0.616 0.16 26.9)
颜色转换
- HEX
- #d4574e
- RGB
- rgb(212 87 78)
- HSL
- hsl(4 61% 57%)
- HWB
- hwb(4 31% 17%)
- OKLCH
- oklch(0.616 0.16 26.9)
- OKLab
- oklab(0.616 0.143 0.072)
- CIE Lab
- lab(53.97 49.81 31.58)
- LCH
- lch(53.97 58.98 32.4)
- CMYK
- cmyk(0% 59% 63% 17%)
浅色调 · 深色调 · 灰色调
浅色调
- DA695F
- E17B71
- E68C82
- EB9D93
- F0ADA5
- F4BDB6
- F7CEC8
- FBDEDA
- FDEFED
深色调
- B84B43
- 9D3E38
- 83332D
- 692723
- 511C19
- 3A120F
- 240807
- 100302
- 020000
灰色调
- CD5D54
- C56259
- BD675F
- B66C64
- AE7069
- A5746E
- 9D7772
- 947A77
- 8A7D7B
配色和谐
互补色 +180°
- D4574E
Valencia
- 0096A5
≈ Tile Blue
类似色 -30° +30°
- D4574E
Valencia
- CD5587
≈ Pretty in Plum
- C66900
≈ Sludge
三角配色 +120° +240°
- D4574E
Valencia
- 2F9E46
≈ Gangly Gremlin
- 597EE4
≈ Pan Purple
分裂互补色 +150° +210°
- D4574E
Valencia
- 009B84
≈ Reptilian Green
- 008FCB
≈ Rich Electric Blue
四角配色 +90° +180° +270°
- D4574E
Valencia
- 808F00
≈ Foggy Bog
- 0096A5
≈ Tile Blue
- 906CD8
≈ Matt Purple
对比度与无障碍
Ag
Fail白底
WCAG 3.98:1 · APCA Lc 66
Ag
AA黑底
WCAG 5.27:1 · APCA Lc 35
最佳文字颜色: #000000
WCAG 5.27:1 (AA) · APCA Lc 35
Contrast pairs
代码片段
CSS
:root {
--valencia: #d4574e;
--valencia-rgb: 212 87 78;
--valencia-oklch: oklch(0.616 0.16 26.9);
}
.element {
color: var(--valencia);
background-color: hsl(4 61% 57%);
border-color: oklch(0.616 0.16 26.9);
}Tailwind CSS v4
@theme {
--color-valencia: #d4574e;
--color-valencia-50: #ffe5db;
--color-valencia-100: #ffd4ca;
--color-valencia-200: #ffbaad;
--color-valencia-300: #ff9688;
--color-valencia-400: #ee756a;
--color-valencia-500: #dc5148;
--color-valencia-600: #ba463e;
--color-valencia-700: #953731;
--color-valencia-800: #6f2725;
--color-valencia-900: #4f1a18;
--color-valencia-950: #340909;
}SCSS
$valencia: #d4574e;
$valencia-rgb: 212, 87, 78;
$valencia-light: mix(#fff, $valencia, 20%);
$valencia-dark: mix(#000, $valencia, 20%);
.element {
color: $valencia;
box-shadow: 0 0 0 2px rgba($valencia, 0.35);
}