# Colors

hex 코드로 정의된 기본 색상 팔레트입니다. 시멘틱 컬러 토큰으로 정의하여 가이드에 따라 사용해야 합니다.

---

Common

White

Black

Gray

10

#F9FAFA

20

#F6F7F7

30

#EFF0F0

50

#E2E5E6

80

#D0D4D6

100

#C6CBCD

150

#BDC2C5

200

#B3BABD

250

#AAB1B5

300

#A1A9AD

400

#878F91

450

#80878A

500

#707679

550

#606567

600

#505456

700

#393B3D

800

#292B2B

900

#1F2020

950

#181818

970

#121212

990

#050505

Red

50

#FFF0F0

100

#FFD6D6

150

#FFADAD

200

#FF8484

300

#FF5B5B

400

#FF3333

500

#E52D2D

600

#BF2626

700

#991E1E

800

#731717

900

#4C0F0F

950

#2E0909

Orange

50

#FFF6EB

100

#FFE3BD

150

#FFCE8C

200

#FFBA5E

300

#FFA733

400

#FF8C00

500

#E58300

600

#CC7400

700

#995700

800

#7F4900

900

#543000

950

#321D00

Yellow

50

#FFFAE5

100

#FFF0B2

150

#FFE98F

200

#FFE166

300

#FFD733

400

#FFCD00

500

#E8BB00

600

#CCA400

700

#B28F00

800

#947700

900

#665200

950

#322800

Green

100

#F2FAF4

200

#C8EBD3

300

#91D6A7

400

#5AC27C

500

#23AE50

600

#209D48

700

#1C8B40

800

#197A38

900

#156830

Light Blue

50

#F0FAFF

100

#E1F4FE

200

#B3E3FD

300

#81D1FB

400

#51BEF7

500

#32B0F5

600

#23A2F2

700

#2294E3

800

#2182CE

900

#1E71BA

Blue

50

#F5F6FF

100

#EDF0FE

200

#C8D2FD

300

#A3B4FB

400

#7E96F9

500

#4769F7

600

#405EDE

700

#324AAD

800

#2B3F94

900

#1C2A63

Purple

50

#F5F5FF

100

#E8E6FF

150

#D7D4FF

200

#C0BAFF

300

#A89FFF

400

#8F82FF

500

#7463F2

600

#604EDF

700

#4B3ABF

800

#392C99

900

#29206E

Zigzag Pink

100

#FFEBF5

200

#FFC2E1

300

#FF99CE

400

#FF71BA

500

#FF349C

600

#E62F8C

700

#C0176D

800

#8F074D

900

#610032

Zigzag Pink New

50

#FEF6FD

100

#FFEBFC

150

#FFD1F7

200

#FFB2F3

300

#FF8AEB

400

#FA6EE3

500

#E560CF

600

#BF49AB

700

#913382

800

#6D2261

900

#4F1245

# Auto Code for State Color

hex 코드로 정의된 원본 색상의 RGB값을 HSB값으로 변환한 값기준으로 hover, pressed 상태에 대한 hex 코드를 생성합니다.

HSB의 Saturation이 4% 이상인 경우

-   Hover: Brightenss - 7%
-   Pressed: Brightenss - 14%

HSB의 Saturation이 4% 미만인 경우

-   Hover: Brightenss - 3%
-   Pressed: Brightenss - 6%

Pick Color

Default

#4769F7

rgb(71 105 247)

Hover

#4261e5

rgb(66 97 229)

Pressed

#3d5ad3

rgb(61 90 211)

```tsx
// 이렇게 사용해보세요.
import { getAutoColorCode } from '@croquiscom/pds';
export const getAutoStyle = (color: HEX) => {
  const { hover, pressed } = getAutoColorCode(color);
  return css`
    color: ${color};
    &:hover {      background-color: ${hover};
    }    &:active {      background-color: ${pressed};
    }    &:disabled {      opacity: 0.4;    }  `;
};
```