色名 · #E35F66
Lovely Little Rosy
Lovely Little Rosyは#E35F66：rgb(227 95 102)、hsl(357 70% 63%)、oklch(0.654 0.165 19.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Lovely Little Rosy color name →
#E35F66
oklch(0.654 0.165 19.7)
カラー変換
- HEX
- #e35f66
- RGB
- rgb(227 95 102)
- HSL
- hsl(357 70% 63%)
- HWB
- hwb(357 37% 11%)
- OKLCH
- oklch(0.654 0.165 19.7)
- OKLab
- oklab(0.654 0.155 0.055)
- CIE Lab
- lab(58.13 52.75 23.61)
- LCH
- lch(58.13 57.8 24.1)
- CMYK
- cmyk(0% 58% 55% 11%)
ティント · シェード · トーン
ティント
- E87175
- ED8183
- F19292
- F4A2A1
- F7B1B1
- FAC1C0
- FCD0CF
- FEE0DF
- FFEFEF
シェード
- C55258
- A8444A
- 8C383C
- 712C2F
- 572023
- 3F1517
- 270A0C
- 120304
- 030000
トーン
- DA6469
- D1696C
- C86D6F
- BE7171
- B57474
- AB7776
- A17979
- 967C7B
- 8B7E7E
カラーハーモニー
補色 +180°
- E35F66
Lovely Little Rosy
- 00A4AB
≈ Aare River Brienz
類似色 -30° +30°
- E35F66
Lovely Little Rosy
- D7609F
≈ Sugar Rush
- DD6C1A
≈ Fading Ember
トライアド +120° +240°
- E35F66
Lovely Little Rosy
- 53A73D
≈ Ballyhoo
- 508EF3
≈ Blue Elemental
スプリットコンプリメンタリー +150° +210°
- E35F66
Lovely Little Rosy
- 00A984
≈ Simply Green
- 009ED0
≈ Structural Blue
テトラード +90° +180° +270°
- E35F66
Lovely Little Rosy
- 979700
≈ Papyrus
- 00A4AB
≈ Aare River Brienz
- 907BED
≈ Forgotten Purple
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.44:1 · APCA Lc 61
Ag
AA黒の上
WCAG 6.09:1 · APCA Lc 40
最適な文字色: #000000
WCAG 6.09:1 (AA) · APCA Lc 40
Contrast pairs
コードスニペット
CSS
:root {
--lovely-little-rosy: #e35f66;
--lovely-little-rosy-rgb: 227 95 102;
--lovely-little-rosy-oklch: oklch(0.654 0.165 19.7);
}
.element {
color: var(--lovely-little-rosy);
background-color: hsl(357 70% 63%);
border-color: oklch(0.654 0.165 19.7);
}Tailwind CSS v4
@theme {
--color-lovely-little-rosy: #e35f66;
--color-lovely-little-rosy-50: #ffe3e0;
--color-lovely-little-rosy-100: #ffd3d0;
--color-lovely-little-rosy-200: #ffb8b5;
--color-lovely-little-rosy-300: #ff9492;
--color-lovely-little-rosy-400: #f07176;
--color-lovely-little-rosy-500: #de4c58;
--color-lovely-little-rosy-600: #bb424b;
--color-lovely-little-rosy-700: #97343b;
--color-lovely-little-rosy-800: #70242c;
--color-lovely-little-rosy-900: #4f181e;
--color-lovely-little-rosy-950: #34080e;
}SCSS
$lovely-little-rosy: #e35f66;
$lovely-little-rosy-rgb: 227, 95, 102;
$lovely-little-rosy-light: mix(#fff, $lovely-little-rosy, 20%);
$lovely-little-rosy-dark: mix(#000, $lovely-little-rosy, 20%);
.element {
color: $lovely-little-rosy;
box-shadow: 0 0 0 2px rgba($lovely-little-rosy, 0.35);
}