色名 · #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);
}