色名 · #C74547
Whiplash
Whiplashは#C74547：rgb(199 69 71)、hsl(359 54% 53%)、oklch(0.572 0.166 23.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Whiplash color name →
#C74547
oklch(0.572 0.166 23.2)
カラー変換
- HEX
- #c74547
- RGB
- rgb(199 69 71)
- HSL
- hsl(359 54% 53%)
- HWB
- hwb(359 27% 22%)
- OKLCH
- oklch(0.572 0.166 23.2)
- OKLab
- oklab(0.572 0.152 0.065)
- CIE Lab
- lab(48.7 52.58 28.68)
- LCH
- lch(48.7 59.89 28.6)
- CMYK
- cmyk(0% 65% 64% 22%)
ティント · シェード · トーン
ティント
- CF5A59
- D76E6A
- DE807C
- E4938E
- EAA5A0
- EFB7B3
- F4C9C5
- F8DBD8
- FCEDEC
シェード
- AD3B3D
- 933132
- 7A2728
- 621E1F
- 4C1516
- 360C0D
- 210506
- 0E0202
- 020000
トーン
- C14E4D
- BB5553
- B55C59
- AF625F
- A86865
- A16D6A
- 997270
- 927775
- 897C7B
カラーハーモニー
補色 +180°
- C74547
Whiplash
- 008892
≈ Tuscana Blue
類似色 -30° +30°
- C74547
Whiplash
- BE4580
≈ Razzle Dazzle
- B85B00
≈ Super Leaf Brown
トライアド +120° +240°
- C74547
Whiplash
- 2A8F2B
≈ Jade of Emeralds
- 4272D8
≈ Skies of Cyberspace
スプリットコンプリメンタリー +150° +210°
- C74547
Whiplash
- 008D72
≈ Observatory
- 0082B2
≈ Lucario Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.80:1 · APCA Lc 72
Ag
Fail黒の上
WCAG 4.37:1 · APCA Lc 29
最適な文字色: #FFFFFF
WCAG 4.80:1 (AA) · APCA Lc 72
Contrast pairs
コードスニペット
CSS
:root {
--whiplash: #c74547;
--whiplash-rgb: 199 69 71;
--whiplash-oklch: oklch(0.572 0.166 23.2);
}
.element {
color: var(--whiplash);
background-color: hsl(359 54% 53%);
border-color: oklch(0.572 0.166 23.2);
}Tailwind CSS v4
@theme {
--color-whiplash: #c74547;
--color-whiplash-50: #ffe4dd;
--color-whiplash-100: #ffd3cc;
--color-whiplash-200: #ffb9b0;
--color-whiplash-300: #ff948c;
--color-whiplash-400: #f0716f;
--color-whiplash-500: #df4c4f;
--color-whiplash-600: #bc4243;
--color-whiplash-700: #973536;
--color-whiplash-800: #712428;
--color-whiplash-900: #50181b;
--color-whiplash-950: #35080b;
}SCSS
$whiplash: #c74547;
$whiplash-rgb: 199, 69, 71;
$whiplash-light: mix(#fff, $whiplash, 20%);
$whiplash-dark: mix(#000, $whiplash, 20%);
.element {
color: $whiplash;
box-shadow: 0 0 0 2px rgba($whiplash, 0.35);
}