색알못을 위한 패턴 가이드 by Oswarld

Base Color

Algorithm

Contrast (L*) Shift

Shade Count

Naming

Boost chroma toward dark shades

50AAA

#DCFFC2

100AAA

#C0E7A7

200AAA

#A6CB8D

300AAA

#8BAF72

400AA

#719458

500Fail

#587A3F

600Fail

#416127

700Fail

#2A490C

800Fail

#143200

900Fail

#011C00

950Fail

#000800

:root {
  --primary-50: #DCFFC2;
  --primary-100: #C0E7A7;
  --primary-200: #A6CB8D;
  --primary-300: #8BAF72;
  --primary-400: #719458;
  --primary-500: #587A3F;
  --primary-600: #416127;
  --primary-700: #2A490C;
  --primary-800: #143200;
  --primary-900: #011C00;
  --primary-950: #000800;
}

CSS Gradient + Shadow Generator

Angle: 90°

Stops

Quick palette picks

Box Shadow

Offset X: 12px

Offset Y: 18px

Blur: 32px

Spread: 0px

Opacity: 25%

Preview

background-image + box-shadow

Gradient CSS

background-image: linear-gradient(90deg, #DCFFC2 0%, #000800 100%);

Shadow CSS

box-shadow: 12px 18px 32px 0px rgba(88, 122, 63, 0.25);