色名 · #D1668F
Preppy Rose
Preppy Roseは#D1668F：rgb(209 102 143)、hsl(337 54% 61%)、oklch(0.649 0.142 357.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Preppy Rose color name →
#D1668F
oklch(0.649 0.142 357.6)
カラー変換
- HEX
- #d1668f
- RGB
- rgb(209 102 143)
- HSL
- hsl(337 54% 61%)
- HWB
- hwb(337 40% 18%)
- OKLCH
- oklch(0.649 0.142 357.6)
- OKLab
- oklab(0.649 0.142 -0.006)
- CIE Lab
- lab(57.44 46.29 -1.7)
- LCH
- lch(57.44 46.32 357.9)
- CMYK
- cmyk(0% 51% 32% 18%)
ティント · シェード · トーン
ティント
- D7769A
- DD85A4
- E395AF
- E8A4BA
- EDB3C6
- F1C2D1
- F5D1DC
- F9E0E8
- FCF0F3
シェード
- B5587C
- 9B4A69
- 813C57
- 682F45
- 502334
- 391724
- 230C15
- 100407
- 020001
トーン
- CA6A8D
- C26D8C
- BB708A
- B37389
- AB7687
- A37886
- 9B7A84
- 927C83
- 897E81
カラーハーモニー
補色 +180°
- D1668F
Preppy Rose
- 00A68E
≈ Ottawa Falls
類似色 -30° +30°
- D1668F
Preppy Rose
- BC6DBB
≈ Lavendless
- D7695D
≈ Tory Red
トライアド +120° +240°
- D1668F
Preppy Rose
- 88991C
≈ Densetsu Green
- 0799DA
≈ Atmosphere
スプリットコンプリメンタリー +150° +210°
- D1668F
Preppy Rose
- 49A65A
≈ Spinach
- 00A1B2
≈ Breaking Wave
テトラード +90° +180° +270°
- D1668F
Preppy Rose
- B18800
≈ Yellow Brown
- 00A68E
≈ Ottawa Falls
- 6989E5
≈ Soft Blue
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.49:1 · APCA Lc 62
Ag
AA黒の上
WCAG 6.00:1 · APCA Lc 40
最適な文字色: #000000
WCAG 6.00:1 (AA) · APCA Lc 40
Contrast pairs
コードスニペット
CSS
:root {
--preppy-rose: #d1668f;
--preppy-rose-rgb: 209 102 143;
--preppy-rose-oklch: oklch(0.649 0.142 357.6);
}
.element {
color: var(--preppy-rose);
background-color: hsl(337 54% 61%);
border-color: oklch(0.649 0.142 357.6);
}Tailwind CSS v4
@theme {
--color-preppy-rose: #d1668f;
--color-preppy-rose-50: #ffe5f4;
--color-preppy-rose-100: #ffd5e6;
--color-preppy-rose-200: #ffbbd2;
--color-preppy-rose-300: #f398b5;
--color-preppy-rose-400: #e0789f;
--color-preppy-rose-500: #cd5886;
--color-preppy-rose-600: #ad4b72;
--color-preppy-rose-700: #8b3c5b;
--color-preppy-rose-800: #672a44;
--color-preppy-rose-900: #481d2f;
--color-preppy-rose-950: #2f0c1c;
}SCSS
$preppy-rose: #d1668f;
$preppy-rose-rgb: 209, 102, 143;
$preppy-rose-light: mix(#fff, $preppy-rose, 20%);
$preppy-rose-dark: mix(#000, $preppy-rose, 20%);
.element {
color: $preppy-rose;
box-shadow: 0 0 0 2px rgba($preppy-rose, 0.35);
}