色名 · #CAADD8
Lavender Field Dreamer
Lavender Field Dreamerは#CAADD8：rgb(202 173 216)、hsl(280 36% 76%)、oklch(0.787 0.068 314.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Lavender Field Dreamer color name →
#CAADD8
oklch(0.787 0.068 314.7)
カラー変換
- HEX
- #caadd8
- RGB
- rgb(202 173 216)
- HSL
- hsl(280 36% 76%)
- HWB
- hwb(280 68% 15%)
- OKLCH
- oklch(0.787 0.068 314.7)
- OKLab
- oklab(0.787 0.048 -0.048)
- CIE Lab
- lab(74.36 16.66 -17.77)
- LCH
- lch(74.36 24.35 313.2)
- CMYK
- cmyk(6% 20% 0% 15%)
ティント · シェード · トーン
ティント
- CFB5DC
- D5BDE0
- DAC5E4
- DFCDE8
- E4D6EC
- EADEF0
- EFE6F4
- F4EEF7
- FAF7FB
シェード
- AF96BC
- 957FA0
- 7C6A85
- 64556B
- 4D4153
- 372D3B
- 221B25
- 0F0B11
- 020102
トーン
- C2A8CF
- BBA4C6
- B39FBD
- AC9BB4
- A496AB
- 9D92A2
- 968D9A
- 8E8991
- 878489
カラーハーモニー
補色 +180°
- CAADD8
Lavender Field Dreamer
- A7C498
≈ Heartland Frosty
類似色 -30° +30°
- CAADD8
Lavender Field Dreamer
- B4B4E4
≈ Beloved
- DAA9C4
≈ Lofty Delight
トライアド +120° +240°
- CAADD8
Lavender Field Dreamer
- D4B489
≈ Camelback Mountain
- 85C8C7
≈ Mercury Mist
スプリットコンプリメンタリー +150° +210°
- CAADD8
Lavender Field Dreamer
- C0BC8A
≈ New Foliage
- 91C8AF
≈ Peppermint Spray
テトラード +90° +180° +270°
- CAADD8
Lavender Field Dreamer
- DFAC96
≈ Arizona Dust
- A7C498
≈ Heartland Frosty
- 8AC3DA
≈ Dolphin
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.00:1 · APCA Lc 39
Ag
AAA黒の上
WCAG 10.48:1 · APCA Lc 64
最適な文字色: #000000
WCAG 10.48:1 (AAA) · APCA Lc 64
Contrast pairs
コードスニペット
CSS
:root {
--lavender-field-dreamer: #caadd8;
--lavender-field-dreamer-rgb: 202 173 216;
--lavender-field-dreamer-oklch: oklch(0.787 0.068 314.7);
}
.element {
color: var(--lavender-field-dreamer);
background-color: hsl(280 36% 76%);
border-color: oklch(0.787 0.068 314.7);
}Tailwind CSS v4
@theme {
--color-lavender-field-dreamer: #caadd8;
--color-lavender-field-dreamer-50: #fdf0ff;
--color-lavender-field-dreamer-100: #f1e1f7;
--color-lavender-field-dreamer-200: #e0cce8;
--color-lavender-field-dreamer-300: #c6adcf;
--color-lavender-field-dreamer-400: #ae93ba;
--color-lavender-field-dreamer-500: #9779a5;
--color-lavender-field-dreamer-600: #80668c;
--color-lavender-field-dreamer-700: #665270;
--color-lavender-field-dreamer-800: #4b3c53;
--color-lavender-field-dreamer-900: #34293a;
--color-lavender-field-dreamer-950: #1f1724;
}SCSS
$lavender-field-dreamer: #caadd8;
$lavender-field-dreamer-rgb: 202, 173, 216;
$lavender-field-dreamer-light: mix(#fff, $lavender-field-dreamer, 20%);
$lavender-field-dreamer-dark: mix(#000, $lavender-field-dreamer, 20%);
.element {
color: $lavender-field-dreamer;
box-shadow: 0 0 0 2px rgba($lavender-field-dreamer, 0.35);
}