色名 · #BC3C2C
Valiant Poppy
Valiant Poppyは#BC3C2C：rgb(188 60 44)、hsl(7 62% 45%)、oklch(0.54 0.167 30.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Valiant Poppy color name →
#BC3C2C
oklch(0.54 0.167 30.4)
カラー変換
- HEX
- #bc3c2c
- RGB
- rgb(188 60 44)
- HSL
- hsl(7 62% 45%)
- HWB
- hwb(7 17% 26%)
- OKLCH
- oklch(0.54 0.167 30.4)
- OKLab
- oklab(0.54 0.144 0.084)
- CIE Lab
- lab(45.05 51.48 39.47)
- LCH
- lch(45.05 64.87 37.5)
- CMYK
- cmyk(0% 68% 77% 26%)
ティント · シェード · トーン
ティント
- C55342
- CE6757
- D67B6B
- DD8E80
- E5A194
- EBB3A9
- F1C6BE
- F6D9D4
- FBECE9
シェード
- A33325
- 8B2A1E
- 732117
- 5D1911
- 47110A
- 320A05
- 1F0402
- 0D0101
- 020000
トーン
- B74636
- B34F40
- AE5649
- A85E51
- A36459
- 9D6A61
- 967069
- 907671
- 887B78
カラーハーモニー
補色 +180°
- BC3C2C
Valiant Poppy
- 007D8D
≈ Metallic Seaweed
類似色 -30° +30°
- BC3C2C
Valiant Poppy
- B7386A
≈ Fiery Fuchsia
- A25A00
≈ Raw Umber
トライアド +120° +240°
- BC3C2C
Valiant Poppy
- 00853D
≈ Philippine Green
- 4B63CE
≈ Monarchist
スプリットコンプリメンタリー +150° +210°
- BC3C2C
Valiant Poppy
- 008171
≈ Tropical Green
- 0076AF
≈ Reef Escape
テトラード +90° +180° +270°
- BC3C2C
Valiant Poppy
- 657900
≈ Topiary Green
- 007D8D
≈ Metallic Seaweed
- 8051BF
≈ Fuchsia Blue
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.49:1 · APCA Lc 76
Ag
Fail黒の上
WCAG 3.82:1 · APCA Lc 25
最適な文字色: #FFFFFF
WCAG 5.49:1 (AA) · APCA Lc 76
Contrast pairs
コードスニペット
CSS
:root {
--valiant-poppy: #bc3c2c;
--valiant-poppy-rgb: 188 60 44;
--valiant-poppy-oklch: oklch(0.54 0.167 30.4);
}
.element {
color: var(--valiant-poppy);
background-color: hsl(7 62% 45%);
border-color: oklch(0.54 0.167 30.4);
}Tailwind CSS v4
@theme {
--color-valiant-poppy: #bc3c2c;
--color-valiant-poppy-50: #ffe5d7;
--color-valiant-poppy-100: #ffd4c5;
--color-valiant-poppy-200: #ffbaa7;
--color-valiant-poppy-300: #ff9680;
--color-valiant-poppy-400: #f17360;
--color-valiant-poppy-500: #df4e3c;
--color-valiant-poppy-600: #bc4434;
--color-valiant-poppy-700: #973629;
--color-valiant-poppy-800: #71251f;
--color-valiant-poppy-900: #501914;
--color-valiant-poppy-950: #350906;
}SCSS
$valiant-poppy: #bc3c2c;
$valiant-poppy-rgb: 188, 60, 44;
$valiant-poppy-light: mix(#fff, $valiant-poppy, 20%);
$valiant-poppy-dark: mix(#000, $valiant-poppy, 20%);
.element {
color: $valiant-poppy;
box-shadow: 0 0 0 2px rgba($valiant-poppy, 0.35);
}