色名 · #FFE6E2

Olm Pink

Olm Pinkは#FFE6E2：rgb(255 230 226)、hsl(8 100% 94%)、oklch(0.944 0.028 28.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Olm Pink color name →

#FFE6E2

oklch(0.944 0.028 28.5)

カラー変換

HEX: #ffe6e2
RGB: rgb(255 230 226)
HSL: hsl(8 100% 94%)
HWB: hwb(8 89% 0%)
OKLCH: oklch(0.944 0.028 28.5)
OKLab: oklab(0.944 0.025 0.013)
CIE Lab: lab(93.27 8.35 5.23)
LCH: lch(93.27 9.85 32.1)
CMYK: cmyk(0% 10% 11% 0%)

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

ティント

FFE9E5
FFEBE8
FFEEEB
FFF0EE
FFF3F0
FFF5F3
FFF7F6
FFFAF9
FFFCFC

シェード

DEC8C4
BEABA8
9E8E8C
807371
635957
48403E
2E2827
161312
030303

トーン

F2DBD8
E4D1CE
D7C6C4
CABCBA
BEB2B0
B1A8A6
A59D9C
989493
8C8A89

カラーハーモニー

補色 +180°

FFE6E2
Olm Pink
D8F2F7
≈ Let It Snow

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.18:1 · APCA Lc 9

Fail

黒の上

WCAG 17.66:1 · APCA Lc 95

AAA

最適な文字色: #000000

WCAG 17.66:1 (AAA) · APCA Lc 95

Contrast pairs

コードスニペット

CSS

:root {
  --olm-pink: #ffe6e2;
  --olm-pink-rgb: 255 230 226;
  --olm-pink-oklch: oklch(0.944 0.028 28.5);
}

.element {
  color: var(--olm-pink);
  background-color: hsl(8 100% 94%);
  border-color: oklch(0.944 0.028 28.5);
}

Tailwind CSS v4

@theme {
  --color-olm-pink: #ffe6e2;
  --color-olm-pink-50: #fdf2f0;
  --color-olm-pink-100: #f1e5e2;
  --color-olm-pink-200: #e0d0cd;
  --color-olm-pink-300: #c5b2af;
  --color-olm-pink-400: #af9995;
  --color-olm-pink-500: #98807c;
  --color-olm-pink-600: #816c69;
  --color-olm-pink-700: #675654;
  --color-olm-pink-800: #4c3f3d;
  --color-olm-pink-900: #352b2a;
  --color-olm-pink-950: #201918;
}

SCSS

$olm-pink: #ffe6e2;
$olm-pink-rgb: 255, 230, 226;
$olm-pink-light: mix(#fff, $olm-pink, 20%);
$olm-pink-dark: mix(#000, $olm-pink, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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