色名 · #A53A4E
Valentine
Valentineは#A53A4E：rgb(165 58 78)、hsl(349 48% 44%)、oklch(0.505 0.141 12.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Valentine color name →
#A53A4E
oklch(0.505 0.141 12.5)
カラー変換
- HEX
- #a53a4e
- RGB
- rgb(165 58 78)
- HSL
- hsl(349 48% 44%)
- HWB
- hwb(349 23% 35%)
- OKLCH
- oklch(0.505 0.141 12.5)
- OKLab
- oklab(0.505 0.138 0.031)
- CIE Lab
- lab(41 45.89 13.1)
- LCH
- lch(41 47.73 15.9)
- CMYK
- cmyk(0% 65% 53% 35%)
ティント · シェード · トーン
ティント
- B04F5E
- BB636F
- C57680
- CE8991
- D79DA2
- E0B0B4
- E9C4C7
- F0D7D9
- F8EBEC
シェード
- 8F3143
- 792838
- 65202D
- 511823
- 3D1019
- 2B090F
- 1A0407
- 0A0102
- 010000
トーン
- A34353
- A04B58
- 9D535D
- 9A5A62
- 976167
- 93686C
- 8F6E71
- 8B7476
- 867A7B
カラーハーモニー
補色 +180°
- A53A4E
Valentine
- 007472
≈ Reef
類似色 -30° +30°
- A53A4E
Valentine
- 983E7A
≈ Purple Wine
- A44211
≈ Powdered Coffee
トライアド +120° +240°
- A53A4E
Valentine
- 437401
≈ Tropicana
- 1666B2
≈ Ephren Blue
スプリットコンプリメンタリー +150° +210°
- A53A4E
Valentine
- 007852
≈ Victoria Peak
- 00708B
≈ Blue Jay Crest
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.33:1 · APCA Lc 81
Ag
Fail黒の上
WCAG 3.31:1 · APCA Lc 21
最適な文字色: #FFFFFF
WCAG 6.33:1 (AA) · APCA Lc 81
Contrast pairs
コードスニペット
CSS
:root {
--valentine: #a53a4e;
--valentine-rgb: 165 58 78;
--valentine-oklch: oklch(0.505 0.141 12.5);
}
.element {
color: var(--valentine);
background-color: hsl(349 48% 44%);
border-color: oklch(0.505 0.141 12.5);
}Tailwind CSS v4
@theme {
--color-valentine: #a53a4e;
--color-valentine-50: #ffe5e8;
--color-valentine-100: #ffd5d9;
--color-valentine-200: #ffbcc1;
--color-valentine-300: #f799a1;
--color-valentine-400: #e57987;
--color-valentine-500: #d2576c;
--color-valentine-600: #b14b5c;
--color-valentine-700: #8f3c49;
--color-valentine-800: #6a2a37;
--color-valentine-900: #4b1c25;
--color-valentine-950: #310c14;
}SCSS
$valentine: #a53a4e;
$valentine-rgb: 165, 58, 78;
$valentine-light: mix(#fff, $valentine, 20%);
$valentine-dark: mix(#000, $valentine, 20%);
.element {
color: $valentine;
box-shadow: 0 0 0 2px rgba($valentine, 0.35);
}