色名 · #FF88AA
Strawberry Dreams
Strawberry Dreamsは#FF88AA：rgb(255 136 170)、hsl(343 100% 77%)、oklch(0.767 0.148 3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Strawberry Dreams color name →
#FF88AA
oklch(0.767 0.148 3)
カラー変換
- HEX
- #ff88aa
- RGB
- rgb(255 136 170)
- HSL
- hsl(343 100% 77%)
- HWB
- hwb(343 53% 0%)
- OKLCH
- oklch(0.767 0.148 3)
- OKLab
- oklab(0.767 0.148 0.008)
- CIE Lab
- lab(71.1 48.65 3.59)
- LCH
- lch(71.1 48.78 4.2)
- CMYK
- cmyk(0% 47% 33% 0%)
ティント · シェード · トーン
ティント
- FF95B2
- FFA1BA
- FFADC3
- FFB9CB
- FFC5D4
- FFD1DC
- FFDCE5
- FFE8EE
- FFF3F6
シェード
- DE7593
- BE637D
- 9E5268
- 804153
- 63313F
- 48222D
- 2E131B
- 16060B
- 030101
トーン
- F388A6
- E688A1
- DA889D
- CD8799
- C18695
- B48591
- A7848C
- 9A8388
- 8D8284
カラーハーモニー
補色 +180°
- FF88AA
Strawberry Dreams
- 00CFBB
≈ Exquisite Turquoise
類似色 -30° +30°
- FF88AA
Strawberry Dreams
- EA8EDB
≈ Love Dust
- FF9078
≈ Coralistic
トライアド +120° +240°
- FF88AA
Strawberry Dreams
- A2C24D
≈ Aerobic Fix
- 61BCFF
≈ Hello Summer
スプリットコンプリメンタリー +150° +210°
- FF88AA
Strawberry Dreams
- 5DCE85
≈ Spring Bouquet
- 00C9E6
≈ Picnic Day Sky
テトラード +90° +180° +270°
- FF88AA
Strawberry Dreams
- D4B026
≈ Grass Daisy
- 00CFBB
≈ Exquisite Turquoise
- 9AAEFF
≈ Widowmaker
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.24:1 · APCA Lc 44
Ag
AAA黒の上
WCAG 9.35:1 · APCA Lc 58
最適な文字色: #000000
WCAG 9.35:1 (AAA) · APCA Lc 58
Contrast pairs
コードスニペット
CSS
:root {
--strawberry-dreams: #ff88aa;
--strawberry-dreams-rgb: 255 136 170;
--strawberry-dreams-oklch: oklch(0.767 0.148 3);
}
.element {
color: var(--strawberry-dreams);
background-color: hsl(343 100% 77%);
border-color: oklch(0.767 0.148 3);
}Tailwind CSS v4
@theme {
--color-strawberry-dreams: #ff88aa;
--color-strawberry-dreams-50: #ffe4ef;
--color-strawberry-dreams-100: #ffd4e1;
--color-strawberry-dreams-200: #ffbacc;
--color-strawberry-dreams-300: #f796ad;
--color-strawberry-dreams-400: #e47696;
--color-strawberry-dreams-500: #d2547d;
--color-strawberry-dreams-600: #b1486a;
--color-strawberry-dreams-700: #8e3954;
--color-strawberry-dreams-800: #6a293f;
--color-strawberry-dreams-900: #4a1b2c;
--color-strawberry-dreams-950: #310b19;
}SCSS
$strawberry-dreams: #ff88aa;
$strawberry-dreams-rgb: 255, 136, 170;
$strawberry-dreams-light: mix(#fff, $strawberry-dreams, 20%);
$strawberry-dreams-dark: mix(#000, $strawberry-dreams, 20%);
.element {
color: $strawberry-dreams;
box-shadow: 0 0 0 2px rgba($strawberry-dreams, 0.35);
}