色名 · #FF006A
Shocking Rose
Shocking Roseは#FF006A：rgb(255 0 106)、hsl(335 100% 50%)、oklch(0.64 0.256 9.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Shocking Rose color name →
#FF006A
oklch(0.64 0.256 9.3)
カラー変換
- HEX
- #ff006a
- RGB
- rgb(255 0 106)
- HSL
- hsl(335 100% 50%)
- HWB
- hwb(335 0% 0%)
- OKLCH
- oklch(0.64 0.256 9.3)
- OKLab
- oklab(0.64 0.253 0.041)
- CIE Lab
- lab(55.2 82.85 18.51)
- LCH
- lch(55.2 84.89 12.6)
- CMYK
- cmyk(0% 100% 58% 0%)
ティント · シェード · トーン
ティント
- FF3F78
- FF5D86
- FF7695
- FF8BA3
- FFA0B2
- FFB4C1
- FFC7D0
- FFDAE0
- FFECEF
シェード
- DE005B
- BE004D
- 9E003F
- 800031
- 630024
- 480018
- 2E000D
- 160004
- 030000
トーン
- F42E6C
- E9416F
- DD4E71
- D25973
- C66275
- B96A78
- AC707A
- 9E767C
- 907B7E
カラーハーモニー
補色 +180°
- FF006A
Shocking Rose
- 00A19A
≈ Ceramic Blue Turquoise
類似色 -30° +30°
- FF006A
Shocking Rose
- E62ABD
≈ Kriss Me Not Fuchsia
- EC5000
≈ Crunchy Carrot
トライアド +120° +240°
- FF006A
Shocking Rose
- 6A9F00
≈ Elven Olympics
- 008FF2
≈ Bleu de France
スプリットコンプリメンタリー +150° +210°
- FF006A
Shocking Rose
- 00A66B
≈ Banaue Jade
- 009CBC
≈ Brilliant Sea
テトラード +90° +180° +270°
- FF006A
Shocking Rose
- A08C00
≈ Guava Green
- 00A19A
≈ Ceramic Blue Turquoise
- 7777FF
≈ Stargate Shimmer
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.84:1 · APCA Lc 63
Ag
AA黒の上
WCAG 5.46:1 · APCA Lc 39
最適な文字色: #000000
WCAG 5.46:1 (AA) · APCA Lc 39
Contrast pairs
コードスニペット
CSS
:root {
--shocking-rose: #ff006a;
--shocking-rose-rgb: 255 0 106;
--shocking-rose-oklch: oklch(0.64 0.256 9.3);
}
.element {
color: var(--shocking-rose);
background-color: hsl(335 100% 50%);
border-color: oklch(0.64 0.256 9.3);
}Tailwind CSS v4
@theme {
--color-shocking-rose: #ff006a;
--color-shocking-rose-50: #ffd7e3;
--color-shocking-rose-100: #ffc4d2;
--color-shocking-rose-200: #ffa3b8;
--color-shocking-rose-300: #ff7596;
--color-shocking-rose-400: #ff3f7d;
--color-shocking-rose-500: #ff0061;
--color-shocking-rose-600: #d90052;
--color-shocking-rose-700: #af0041;
--color-shocking-rose-800: #820032;
--color-shocking-rose-900: #5c0022;
--color-shocking-rose-950: #3e0011;
}SCSS
$shocking-rose: #ff006a;
$shocking-rose-rgb: 255, 0, 106;
$shocking-rose-light: mix(#fff, $shocking-rose, 20%);
$shocking-rose-dark: mix(#000, $shocking-rose, 20%);
.element {
color: $shocking-rose;
box-shadow: 0 0 0 2px rgba($shocking-rose, 0.35);
}