色名 · #CF758A
First Love
First Loveは#CF758A：rgb(207 117 138)、hsl(346 48% 64%)、oklch(0.667 0.115 5.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · First Love color name →
#CF758A
oklch(0.667 0.115 5.7)
カラー変換
- HEX
- #cf758a
- RGB
- rgb(207 117 138)
- HSL
- hsl(346 48% 64%)
- HWB
- hwb(346 46% 19%)
- OKLCH
- oklch(0.667 0.115 5.7)
- OKLab
- oklab(0.667 0.114 0.011)
- CIE Lab
- lab(60.05 37.8 4.89)
- LCH
- lch(60.05 38.12 7.4)
- CMYK
- cmyk(0% 43% 33% 19%)
ティント · シェード · トーン
ティント
- D58395
- DB91A0
- E09EAC
- E5ACB7
- EABAC3
- EFC7CF
- F3D5DB
- F8E3E7
- FBF1F3
シェード
- B46577
- 995565
- 7F4653
- 673742
- 4F2932
- 381C22
- 230F14
- 100507
- 020101
トーン
- C87789
- C07888
- B97A87
- B17B86
- A97C85
- A17D84
- 997E83
- 917F82
- 897F81
カラーハーモニー
補色 +180°
- CF758A
First Love
- 12AB9E
≈ Tropical Hideaway
類似色 -30° +30°
- CF758A
First Love
- C078B0
≈ Colombo Red Mauve
- D17962
≈ Silithus Brown
トライアド +120° +240°
- CF758A
First Love
- 83A14F
≈ Nasturtium Shoot
- 539BD6
≈ Blue Bay
スプリットコンプリメンタリー +150° +210°
- CF758A
First Love
- 52A976
≈ Sēn Lín Lǜ Forest
- 17A5C1
≈ Maui
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.19:1 · APCA Lc 59
Ag
AA黒の上
WCAG 6.56:1 · APCA Lc 43
最適な文字色: #000000
WCAG 6.56:1 (AA) · APCA Lc 43
Contrast pairs
コードスニペット
CSS
:root {
--first-love: #cf758a;
--first-love-rgb: 207 117 138;
--first-love-oklch: oklch(0.667 0.115 5.7);
}
.element {
color: var(--first-love);
background-color: hsl(346 48% 64%);
border-color: oklch(0.667 0.115 5.7);
}Tailwind CSS v4
@theme {
--color-first-love: #cf758a;
--color-first-love-50: #ffe8ef;
--color-first-love-100: #ffd9e1;
--color-first-love-200: #ffc0cb;
--color-first-love-300: #eb9fac;
--color-first-love-400: #d78194;
--color-first-love-500: #c4637b;
--color-first-love-600: #a65468;
--color-first-love-700: #854353;
--color-first-love-800: #62303e;
--color-first-love-900: #45212b;
--color-first-love-950: #2d1018;
}SCSS
$first-love: #cf758a;
$first-love-rgb: 207, 117, 138;
$first-love-light: mix(#fff, $first-love, 20%);
$first-love-dark: mix(#000, $first-love, 20%);
.element {
color: $first-love;
box-shadow: 0 0 0 2px rgba($first-love, 0.35);
}