色名 · #F2A0A1
Plum Blossom
Plum Blossomは#F2A0A1：rgb(242 160 161)、hsl(359 76% 79%)、oklch(0.787 0.098 18.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Plum Blossom color name →
#F2A0A1
oklch(0.787 0.098 18.7)
カラー変換
- HEX
- #f2a0a1
- RGB
- rgb(242 160 161)
- HSL
- hsl(359 76% 79%)
- HWB
- hwb(359 63% 5%)
- OKLCH
- oklch(0.787 0.098 18.7)
- OKLab
- oklab(0.787 0.093 0.031)
- CIE Lab
- lab(74.26 31.43 12.72)
- LCH
- lch(74.26 33.9 22)
- CMYK
- cmyk(0% 34% 33% 5%)
ティント · シェード · トーン
ティント
- F4AAAA
- F6B3B3
- F8BDBD
- FAC6C6
- FBD0CF
- FCD9D9
- FDE3E2
- FEECEC
- FFF6F5
シェード
- D28B8B
- B47676
- 966162
- 794E4E
- 5E3B3C
- 43292A
- 2B1919
- 140909
- 030101
トーン
- E79D9E
- DB9A9A
- D09797
- C49494
- B99191
- AE8D8D
- A28A8A
- 978787
- 8C8383
カラーハーモニー
補色 +180°
- F2A0A1
Plum Blossom
- 63CDD1
≈ Petrichor
類似色 -30° +30°
- F2A0A1
Plum Blossom
- E9A0C4
≈ Be My Valentine
- EDA781
≈ Coral Dust
トライアド +120° +240°
- F2A0A1
Plum Blossom
- 9AC98C
≈ Whipped Pistachio
- 93BBF9
≈ Truesky Gloxym
スプリットコンプリメンタリー +150° +210°
- F2A0A1
Plum Blossom
- 75CEAE
≈ Sea Treasure
- 71C6EC
≈ Spritzig
テトラード +90° +180° +270°
- F2A0A1
Plum Blossom
- BFBF73
≈ Zoodles
- 63CDD1
≈ Petrichor
- B7B0F5
≈ Winterspring Lilac
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.03:1 · APCA Lc 39
Ag
AAA黒の上
WCAG 10.31:1 · APCA Lc 63
最適な文字色: #000000
WCAG 10.31:1 (AAA) · APCA Lc 63
Contrast pairs
コードスニペット
CSS
:root {
--plum-blossom: #f2a0a1;
--plum-blossom-rgb: 242 160 161;
--plum-blossom-oklch: oklch(0.787 0.098 18.7);
}
.element {
color: var(--plum-blossom);
background-color: hsl(359 76% 79%);
border-color: oklch(0.787 0.098 18.7);
}Tailwind CSS v4
@theme {
--color-plum-blossom: #f2a0a1;
--color-plum-blossom-50: #ffebe9;
--color-plum-blossom-100: #ffdcda;
--color-plum-blossom-200: #fcc4c2;
--color-plum-blossom-300: #e5a4a2;
--color-plum-blossom-400: #d28788;
--color-plum-blossom-500: #be6a6c;
--color-plum-blossom-600: #a15a5c;
--color-plum-blossom-700: #814849;
--color-plum-blossom-800: #603436;
--color-plum-blossom-900: #432325;
--color-plum-blossom-950: #2b1214;
}SCSS
$plum-blossom: #f2a0a1;
$plum-blossom-rgb: 242, 160, 161;
$plum-blossom-light: mix(#fff, $plum-blossom, 20%);
$plum-blossom-dark: mix(#000, $plum-blossom, 20%);
.element {
color: $plum-blossom;
box-shadow: 0 0 0 2px rgba($plum-blossom, 0.35);
}