色名 · #FF1CAE
Spicy Pink
Spicy Pinkは#FF1CAE：rgb(255 28 174)、hsl(321 100% 55%)、oklch(0.667 0.269 348.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Spicy Pink color name →
#FF1CAE
oklch(0.667 0.269 348.9)
カラー変換
- HEX
- #ff1cae
- RGB
- rgb(255 28 174)
- HSL
- hsl(321 100% 55%)
- HWB
- hwb(321 11% 0%)
- OKLCH
- oklch(0.667 0.269 348.9)
- OKLab
- oklab(0.667 0.264 -0.052)
- CIE Lab
- lab(57.7 84.31 -18.37)
- LCH
- lch(57.7 86.28 347.7)
- CMYK
- cmyk(0% 89% 32% 0%)
ティント · シェード · トーン
ティント
- FF47B6
- FF63BE
- FF7AC6
- FF8FCE
- FFA3D6
- FFB6DE
- FFC9E7
- FFDBEF
- FFEDF7
シェード
- DE1797
- BE1280
- 9E0D6A
- 800855
- 630541
- 48022E
- 2E011C
- 16000B
- 030001
トーン
- F437A9
- E847A5
- DD53A0
- D15D9C
- C56597
- B86C93
- AB728E
- 9E7789
- 8F7C85
カラーハーモニー
補色 +180°
- FF1CAE
Spicy Pink
- 00AE86
≈ Simply Green
類似色 -30° +30°
- FF1CAE
Spicy Pink
- D643FA
≈ Geisha Pink
- FF445C
≈ Watermelon
トライアド +120° +240°
- FF1CAE
Spicy Pink
- 9C9A00
≈ Papyrus
- 00A2D4
≈ Charybdis
スプリットコンプリメンタリー +150° +210°
- FF1CAE
Spicy Pink
- 40B000
≈ Early Dew
- 00A9AE
≈ Fiji
テトラード +90° +180° +270°
- FF1CAE
Spicy Pink
- C18800
≈ Auric
- 00AE86
≈ Simply Green
- 4B92FF
≈ Polar Glow
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.48:1 · APCA Lc 60
Ag
AA黒の上
WCAG 6.02:1 · APCA Lc 42
最適な文字色: #000000
WCAG 6.02:1 (AA) · APCA Lc 42
Contrast pairs
コードスニペット
CSS
:root {
--spicy-pink: #ff1cae;
--spicy-pink-rgb: 255 28 174;
--spicy-pink-oklch: oklch(0.667 0.269 348.9);
}
.element {
color: var(--spicy-pink);
background-color: hsl(321 100% 55%);
border-color: oklch(0.667 0.269 348.9);
}Tailwind CSS v4
@theme {
--color-spicy-pink: #ff1cae;
--color-spicy-pink-50: #ffd5ff;
--color-spicy-pink-100: #ffc2f3;
--color-spicy-pink-200: #ffa0e2;
--color-spicy-pink-300: #ff72c8;
--color-spicy-pink-400: #ff3db7;
--color-spicy-pink-500: #f600a2;
--color-spicy-pink-600: #d00089;
--color-spicy-pink-700: #a7006d;
--color-spicy-pink-800: #7c0054;
--color-spicy-pink-900: #58003b;
--color-spicy-pink-950: #3b0024;
}SCSS
$spicy-pink: #ff1cae;
$spicy-pink-rgb: 255, 28, 174;
$spicy-pink-light: mix(#fff, $spicy-pink, 20%);
$spicy-pink-dark: mix(#000, $spicy-pink, 20%);
.element {
color: $spicy-pink;
box-shadow: 0 0 0 2px rgba($spicy-pink, 0.35);
}