色名 · #C5D2DF
Light Time Travel
Light Time Travelは#C5D2DF：rgb(197 210 223)、hsl(210 29% 82%)、oklch(0.858 0.023 248.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Light Time Travel color name →
#C5D2DF
oklch(0.858 0.023 248.1)
カラー変換
- HEX
- #c5d2df
- RGB
- rgb(197 210 223)
- HSL
- hsl(210 29% 82%)
- HWB
- hwb(210 77% 13%)
- OKLCH
- oklch(0.858 0.023 248.1)
- OKLab
- oklab(0.858 -0.009 -0.021)
- CIE Lab
- lab(83.49 -2.64 -8.04)
- LCH
- lch(83.49 8.46 251.8)
- CMYK
- cmyk(12% 6% 0% 13%)
ティント · シェード · トーン
ティント
- CBD6E2
- D0DBE5
- D6DFE9
- DCE4EC
- E2E8EF
- E8EDF2
- EDF1F5
- F3F6F9
- F9FAFC
シェード
- ABB6C2
- 929BA5
- 79818A
- 61686F
- 4B5056
- 35393D
- 212427
- 0E1012
- 020202
トーン
- BEC9D5
- B7C1CB
- B0B9C2
- A9B0B8
- A2A8AE
- 9BA0A5
- 94989C
- 8D9092
- 878889
カラーハーモニー
補色 +180°
- C5D2DF
Light Time Travel
- DBCEC1
≈ Warm Oatmeal
類似色 -30° +30°
- C5D2DF
Light Time Travel
- C1D4DA
≈ Cloudy Sky
- CCCFE0
≈ Wildflower Prairie
トライアド +120° +240°
- C5D2DF
Light Time Travel
- DFCACD
≈ Mega Metal Mecha
- CCD3C4
≈ Iced Aniseed
スプリットコンプリメンタリー +150° +210°
- C5D2DF
Light Time Travel
- DFCCC6
≈ Lip Gloss
- D4D1C0
≈ Ecru White
テトラード +90° +180° +270°
- C5D2DF
Light Time Travel
- DBCBD5
≈ Silver Mauve
- DBCEC1
≈ Warm Oatmeal
- C5D5CB
≈ Gracilis
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.53:1 · APCA Lc 25
Ag
AAA黒の上
WCAG 13.65:1 · APCA Lc 78
最適な文字色: #000000
WCAG 13.65:1 (AAA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--light-time-travel: #c5d2df;
--light-time-travel-rgb: 197 210 223;
--light-time-travel-oklch: oklch(0.858 0.023 248.1);
}
.element {
color: var(--light-time-travel);
background-color: hsl(210 29% 82%);
border-color: oklch(0.858 0.023 248.1);
}Tailwind CSS v4
@theme {
--color-light-time-travel: #c5d2df;
--color-light-time-travel-50: #f0f6fc;
--color-light-time-travel-100: #e2e9ef;
--color-light-time-travel-200: #cdd5de;
--color-light-time-travel-300: #afb9c3;
--color-light-time-travel-400: #94a0ac;
--color-light-time-travel-500: #7b8895;
--color-light-time-travel-600: #68737e;
--color-light-time-travel-700: #535c65;
--color-light-time-travel-800: #3c434a;
--color-light-time-travel-900: #292e33;
--color-light-time-travel-950: #171b1f;
}SCSS
$light-time-travel: #c5d2df;
$light-time-travel-rgb: 197, 210, 223;
$light-time-travel-light: mix(#fff, $light-time-travel, 20%);
$light-time-travel-dark: mix(#000, $light-time-travel, 20%);
.element {
color: $light-time-travel;
box-shadow: 0 0 0 2px rgba($light-time-travel, 0.35);
}