色名 · #CFD8D1

Serene Journey

Serene Journeyは#CFD8D1：rgb(207 216 209)、hsl(133 10% 83%)、oklch(0.873 0.014 152.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Serene Journey color name →

#CFD8D1

oklch(0.873 0.014 152.6)

カラー変換

HEX: #cfd8d1
RGB: rgb(207 216 209)
HSL: hsl(133 10% 83%)
HWB: hwb(133 81% 15%)
OKLCH: oklch(0.873 0.014 152.6)
OKLab: oklab(0.873 -0.012 0.006)
CIE Lab: lab(85.49 -4.11 2.35)
LCH: lch(85.49 4.74 150.3)
CMYK: cmyk(4% 0% 3% 15%)

ティント · シェード · トーン

ティント

D4DCD6
D8E0DA
DDE4DF
E2E7E3
E7EBE8
ECEFEC
F0F3F1
F5F7F6
FAFBFA

シェード

B4BCB5
99A09B
7F8581
676B68
4F5350
383B39
232523
101110
020202

トーン

C7CFC9
BFC6C0
B7BDB8
AFB4B0
A7ABA8
9FA2A0
979A98
8F9190
888888

カラーハーモニー

補色 +180°

CFD8D1
Serene Journey
DBD2D9
≈ Blackberry Cream

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 1.45:1 · APCA Lc 22

Fail

黒の上

WCAG 14.39:1 · APCA Lc 81

AAA

最適な文字色: #000000

WCAG 14.39:1 (AAA) · APCA Lc 81

Contrast pairs

コードスニペット

CSS

:root {
  --serene-journey: #cfd8d1;
  --serene-journey-rgb: 207 216 209;
  --serene-journey-oklch: oklch(0.873 0.014 152.6);
}

.element {
  color: var(--serene-journey);
  background-color: hsl(133 10% 83%);
  border-color: oklch(0.873 0.014 152.6);
}

Tailwind CSS v4

@theme {
  --color-serene-journey: #cfd8d1;
  --color-serene-journey-50: #f2f6f3;
  --color-serene-journey-100: #e4e9e6;
  --color-serene-journey-200: #d0d6d2;
  --color-serene-journey-300: #b2b9b4;
  --color-serene-journey-400: #99a19b;
  --color-serene-journey-500: #808982;
  --color-serene-journey-600: #6c746e;
  --color-serene-journey-700: #565d58;
  --color-serene-journey-800: #3f4440;
  --color-serene-journey-900: #2b2f2c;
  --color-serene-journey-950: #191b19;
}

SCSS

$serene-journey: #cfd8d1;
$serene-journey-rgb: 207, 216, 209;
$serene-journey-light: mix(#fff, $serene-journey, 20%);
$serene-journey-dark: mix(#000, $serene-journey, 20%);

.element {
  color: $serene-journey;
  box-shadow: 0 0 0 2px rgba($serene-journey, 0.35);
}

近い色名

Palettes with similar colors

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API