命名颜色 · #FD7C6E
Hipster Salmon
Hipster Salmon 即 #FD7C6E：rgb(253 124 110)、hsl(6 97% 71%)、oklch(0.732 0.16 27.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Hipster Salmon color name →
#FD7C6E
oklch(0.732 0.16 27.9)
颜色转换
- HEX
- #fd7c6e
- RGB
- rgb(253 124 110)
- HSL
- hsl(6 97% 71%)
- HWB
- hwb(6 43% 1%)
- OKLCH
- oklch(0.732 0.16 27.9)
- OKLab
- oklab(0.732 0.141 0.075)
- CIE Lab
- lab(67.46 49.36 31.98)
- LCH
- lch(67.46 58.82 32.9)
- CMYK
- cmyk(0% 51% 57% 1%)
浅色调 · 深色调 · 灰色调
浅色调
- FF8A7C
- FF988B
- FFA599
- FFB3A8
- FFC0B6
- FFCCC4
- FFD9D3
- FFE6E2
- FFF2F0
深色调
- DC6B5F
- BC5A50
- 9D4A41
- 7F3B33
- 622C26
- 471E19
- 2D110E
- 160504
- 030101
灰色调
- F17E70
- E57F73
- D98075
- CD8177
- C08179
- B4817A
- A7817C
- 9B817D
- 8E817F
配色和谐
互补色 +180°
- FD7C6E
Hipster Salmon
- 00BED2
≈ Holiday Blue
类似色 -30° +30°
- FD7C6E
Hipster Salmon
- F679A8
≈ Erythrosine
- F18B2B
≈ Peril’s Flames
三角配色 +120° +240°
- FD7C6E
Hipster Salmon
- 56C36C
≈ Zombie Green
- 83A4FF
≈ Fennel Flower
分裂互补色 +150° +210°
- FD7C6E
Hipster Salmon
- 00C3A8
≈ Turquoise
- 19B4FF
≈ Blue Bolt
四角配色 +90° +180° +270°
- FD7C6E
Hipster Salmon
- A0B524
≈ Tree Frog
- 00BED2
≈ Holiday Blue
- B590FF
≈ Lilac Geode
对比度与无障碍
Ag
Fail白底
WCAG 2.53:1 · APCA Lc 49
Ag
AAA黑底
WCAG 8.28:1 · APCA Lc 53
最佳文字颜色: #000000
WCAG 8.28:1 (AAA) · APCA Lc 53
Contrast pairs
代码片段
CSS
:root {
--hipster-salmon: #fd7c6e;
--hipster-salmon-rgb: 253 124 110;
--hipster-salmon-oklch: oklch(0.732 0.16 27.9);
}
.element {
color: var(--hipster-salmon);
background-color: hsl(6 97% 71%);
border-color: oklch(0.732 0.16 27.9);
}Tailwind CSS v4
@theme {
--color-hipster-salmon: #fd7c6e;
--color-hipster-salmon-50: #ffe5da;
--color-hipster-salmon-100: #ffd5c9;
--color-hipster-salmon-200: #ffbbac;
--color-hipster-salmon-300: #ff9786;
--color-hipster-salmon-400: #ee7568;
--color-hipster-salmon-500: #dc5146;
--color-hipster-salmon-600: #ba463c;
--color-hipster-salmon-700: #95382f;
--color-hipster-salmon-800: #6f2723;
--color-hipster-salmon-900: #4f1a17;
--color-hipster-salmon-950: #340a09;
}SCSS
$hipster-salmon: #fd7c6e;
$hipster-salmon-rgb: 253, 124, 110;
$hipster-salmon-light: mix(#fff, $hipster-salmon, 20%);
$hipster-salmon-dark: mix(#000, $hipster-salmon, 20%);
.element {
color: $hipster-salmon;
box-shadow: 0 0 0 2px rgba($hipster-salmon, 0.35);
}