色名 · #FF006C
Vivid Raspberry
Vivid Raspberryは#FF006C：rgb(255 0 108)、hsl(335 100% 50%)、oklch(0.64 0.256 8.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Vivid Raspberry color name →
#FF006C
oklch(0.64 0.256 8.7)
カラー変換
- HEX
- #ff006c
- RGB
- rgb(255 0 108)
- HSL
- hsl(335 100% 50%)
- HWB
- hwb(335 0% 0%)
- OKLCH
- oklch(0.64 0.256 8.7)
- OKLab
- oklab(0.64 0.253 0.039)
- CIE Lab
- lab(55.24 82.93 17.35)
- LCH
- lch(55.24 84.72 11.8)
- CMYK
- cmyk(0% 100% 58% 0%)
ティント · シェード · トーン
ティント
- FF3F7A
- FF5D88
- FF7696
- FF8BA5
- FFA0B3
- FFB4C2
- FFC7D1
- FFDAE0
- FFECEF
シェード
- DE005D
- BE004E
- 9E0040
- 800032
- 630025
- 480019
- 2E000D
- 160004
- 030000
トーン
- F42E6E
- E94170
- DD4E72
- D25974
- C66276
- B96A78
- AC707A
- 9E767C
- 907B7E
カラーハーモニー
補色 +180°
- FF006C
Vivid Raspberry
- 00A199
≈ Spectra Green
類似色 -30° +30°
- FF006C
Vivid Raspberry
- E62BBF
≈ Kriss Me Not Fuchsia
- EE4E00
≈ Kimchi
トライアド +120° +240°
- FF006C
Vivid Raspberry
- 6C9E00
≈ Elven Olympics
- 0090F0
≈ Bleu de France
スプリットコンプリメンタリー +150° +210°
- FF006C
Vivid Raspberry
- 00A66A
≈ Jade
- 009CBB
≈ Brilliant Sea
テトラード +90° +180° +270°
- FF006C
Vivid Raspberry
- A18C00
≈ Guava Green
- 00A199
≈ Spectra Green
- 7678FF
≈ 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 {
--vivid-raspberry: #ff006c;
--vivid-raspberry-rgb: 255 0 108;
--vivid-raspberry-oklch: oklch(0.64 0.256 8.7);
}
.element {
color: var(--vivid-raspberry);
background-color: hsl(335 100% 50%);
border-color: oklch(0.64 0.256 8.7);
}Tailwind CSS v4
@theme {
--color-vivid-raspberry: #ff006c;
--color-vivid-raspberry-50: #ffd7e3;
--color-vivid-raspberry-100: #ffc4d3;
--color-vivid-raspberry-200: #ffa2ba;
--color-vivid-raspberry-300: #ff7497;
--color-vivid-raspberry-400: #ff3f7f;
--color-vivid-raspberry-500: #ff0063;
--color-vivid-raspberry-600: #d90054;
--color-vivid-raspberry-700: #ae0043;
--color-vivid-raspberry-800: #820033;
--color-vivid-raspberry-900: #5c0023;
--color-vivid-raspberry-950: #3e0012;
}SCSS
$vivid-raspberry: #ff006c;
$vivid-raspberry-rgb: 255, 0, 108;
$vivid-raspberry-light: mix(#fff, $vivid-raspberry, 20%);
$vivid-raspberry-dark: mix(#000, $vivid-raspberry, 20%);
.element {
color: $vivid-raspberry;
box-shadow: 0 0 0 2px rgba($vivid-raspberry, 0.35);
}