# Color
URL: /docs/getting-started/color
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/color.mdx

컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.

***

title: Color
description: 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.
---------------------------------------------------------

| token                                   | value                         |
| --------------------------------------- | ----------------------------- |
| --vapor-color-canvas                    | #ffffff                       |
| --vapor-color-white                     | #FFFFFF                       |
| --vapor-color-black                     | #000000                       |
| --vapor-color-gray-050                  | #f7f7f7                       |
| --vapor-color-gray-100                  | #e1e1e1                       |
| --vapor-color-gray-200                  | #c6c6c6                       |
| --vapor-color-gray-300                  | #a3a3a3                       |
| --vapor-color-gray-400                  | #959595                       |
| --vapor-color-gray-500                  | #767676                       |
| --vapor-color-gray-600                  | #5d5d5d                       |
| --vapor-color-gray-700                  | #4c4c4c                       |
| --vapor-color-gray-800                  | #393939                       |
| --vapor-color-gray-900                  | #262626                       |
| --vapor-color-red-050                   | #fff5f4                       |
| --vapor-color-red-100                   | #ffd8d7                       |
| --vapor-color-red-200                   | #ffb3b2                       |
| --vapor-color-red-300                   | #fc7d7f                       |
| --vapor-color-red-400                   | #f8636a                       |
| --vapor-color-red-500                   | #da3944                       |
| --vapor-color-red-600                   | #bb1225                       |
| --vapor-color-red-700                   | #9e0006                       |
| --vapor-color-red-800                   | #790000                       |
| --vapor-color-red-900                   | #570000                       |
| --vapor-color-pink-050                  | #fff5f7                       |
| --vapor-color-pink-100                  | #ffd8e2                       |
| --vapor-color-pink-200                  | #ffb1c6                       |
| --vapor-color-pink-300                  | #f77ca3                       |
| --vapor-color-pink-400                  | #f26394                       |
| --vapor-color-pink-500                  | #d13e76                       |
| --vapor-color-pink-600                  | #b5135d                       |
| --vapor-color-pink-700                  | #9a0047                       |
| --vapor-color-pink-800                  | #77002d                       |
| --vapor-color-pink-900                  | #550016                       |
| --vapor-color-grape-050                 | #fcf5fe                       |
| --vapor-color-grape-100                 | #f4d8fb                       |
| --vapor-color-grape-200                 | #e9b4f7                       |
| --vapor-color-grape-300                 | #d883ef                       |
| --vapor-color-grape-400                 | #d06bea                       |
| --vapor-color-grape-500                 | #b542d1                       |
| --vapor-color-grape-600                 | #9a1cb7                       |
| --vapor-color-grape-700                 | #83009f                       |
| --vapor-color-grape-800                 | #62007e                       |
| --vapor-color-grape-900                 | #43005e                       |
| --vapor-color-violet-050                | #f9f5ff                       |
| --vapor-color-violet-100                | #ebdbff                       |
| --vapor-color-violet-200                | #d9b9ff                       |
| --vapor-color-violet-300                | #b691fa                       |
| --vapor-color-violet-400                | #a480f7                       |
| --vapor-color-violet-500                | #805cec                       |
| --vapor-color-violet-600                | #693fcf                       |
| --vapor-color-violet-700                | #5929ba                       |
| --vapor-color-violet-800                | #4805a3                       |
| --vapor-color-violet-900                | #2e007a                       |
| --vapor-color-blue-050                  | #eff8ff                       |
| --vapor-color-blue-100                  | #c6e6ff                       |
| --vapor-color-blue-200                  | #8dcdff                       |
| --vapor-color-blue-300                  | #51a9f7                       |
| --vapor-color-blue-400                  | #4198f2                       |
| --vapor-color-blue-500                  | #2A72E5                       |
| --vapor-color-blue-600                  | #0957c8                       |
| --vapor-color-blue-700                  | #0043b3                       |
| --vapor-color-blue-800                  | #002b9b                       |
| --vapor-color-blue-900                  | #000e84                       |
| --vapor-color-cyan-050                  | #eef9fb                       |
| --vapor-color-cyan-100                  | #c2e8f0                       |
| --vapor-color-cyan-200                  | #84d2e2                       |
| --vapor-color-cyan-300                  | #1bb3cc                       |
| --vapor-color-cyan-400                  | #14a3bc                       |
| --vapor-color-cyan-500                  | #04819c                       |
| --vapor-color-cyan-600                  | #006680                       |
| --vapor-color-cyan-700                  | #00536c                       |
| --vapor-color-cyan-800                  | #003e57                       |
| --vapor-color-cyan-900                  | #002941                       |
| --vapor-color-green-050                 | #edfaf4                       |
| --vapor-color-green-100                 | #bbecd7                       |
| --vapor-color-green-200                 | #75d9b4                       |
| --vapor-color-green-300                 | #43b790                       |
| --vapor-color-green-400                 | #33a782                       |
| --vapor-color-green-500                 | #058765                       |
| --vapor-color-green-600                 | #006c4b                       |
| --vapor-color-green-700                 | #00583a                       |
| --vapor-color-green-800                 | #004226                       |
| --vapor-color-green-900                 | #002e13                       |
| --vapor-color-lime-050                  | #f1fae8                       |
| --vapor-color-lime-100                  | #c9eca8                       |
| --vapor-color-lime-200                  | #9ad84a                       |
| --vapor-color-lime-300                  | #71b61a                       |
| --vapor-color-lime-400                  | #61a613                       |
| --vapor-color-lime-500                  | #428600                       |
| --vapor-color-lime-600                  | #276c00                       |
| --vapor-color-lime-700                  | #115a00                       |
| --vapor-color-lime-800                  | #004400                       |
| --vapor-color-lime-900                  | #002e00                       |
| --vapor-color-yellow-050                | #fff7e7                       |
| --vapor-color-yellow-100                | #ffdd95                       |
| --vapor-color-yellow-200                | #fbbd05                       |
| --vapor-color-yellow-300                | #d99700                       |
| --vapor-color-yellow-400                | #ca8700                       |
| --vapor-color-yellow-500                | #a96800                       |
| --vapor-color-yellow-600                | #8d4f00                       |
| --vapor-color-yellow-700                | #7a3c00                       |
| --vapor-color-yellow-800                | #632700                       |
| --vapor-color-yellow-900                | #4d1100                       |
| --vapor-color-orange-050                | #fff6f1                       |
| --vapor-color-orange-100                | #ffd9c8                       |
| --vapor-color-orange-200                | #fcb797                       |
| --vapor-color-orange-300                | #f4864f                       |
| --vapor-color-orange-400                | #ef6f25                       |
| --vapor-color-orange-500                | #d34701                       |
| --vapor-color-orange-600                | #b72100                       |
| --vapor-color-orange-700                | #9e0000                       |
| --vapor-color-orange-800                | #790000                       |
| --vapor-color-orange-900                | #560000                       |
| --vapor-color-background-primary-100    | var(--vapor-color-blue-100)   |
| --vapor-color-background-primary-200    | var(--vapor-color-blue-500)   |
| --vapor-color-background-primary-weak   | var(--vapor-color-blue-100)   |
| --vapor-color-background-primary        | var(--vapor-color-blue-500)   |
| --vapor-color-background-secondary-100  | var(--vapor-color-gray-050)   |
| --vapor-color-background-secondary-200  | var(--vapor-color-gray-100)   |
| --vapor-color-background-secondary-weak | var(--vapor-color-gray-050)   |
| --vapor-color-background-secondary      | var(--vapor-color-gray-100)   |
| --vapor-color-background-success-100    | var(--vapor-color-green-100)  |
| --vapor-color-background-success-200    | var(--vapor-color-green-500)  |
| --vapor-color-background-success-weak   | var(--vapor-color-green-100)  |
| --vapor-color-background-success        | var(--vapor-color-green-500)  |
| --vapor-color-background-warning-100    | var(--vapor-color-orange-100) |
| --vapor-color-background-warning-200    | var(--vapor-color-orange-500) |
| --vapor-color-background-warning-weak   | var(--vapor-color-orange-100) |
| --vapor-color-background-warning        | var(--vapor-color-orange-500) |
| --vapor-color-background-danger-100     | var(--vapor-color-red-100)    |
| --vapor-color-background-danger-200     | var(--vapor-color-red-500)    |
| --vapor-color-background-danger-weak    | var(--vapor-color-red-100)    |
| --vapor-color-background-danger         | var(--vapor-color-red-500)    |
| --vapor-color-background-hint-100       | var(--vapor-color-gray-100)   |
| --vapor-color-background-hint-200       | var(--vapor-color-gray-600)   |
| --vapor-color-background-hint-weak      | var(--vapor-color-gray-100)   |
| --vapor-color-background-hint           | var(--vapor-color-gray-600)   |
| --vapor-color-background-contrast-100   | var(--vapor-color-gray-300)   |
| --vapor-color-background-contrast-200   | var(--vapor-color-gray-800)   |
| --vapor-color-background-contrast-weak  | var(--vapor-color-gray-500)   |
| --vapor-color-background-contrast       | var(--vapor-color-gray-800)   |
| --vapor-color-background-canvas-100     | var(--vapor-color-canvas)     |
| --vapor-color-background-canvas-200     | var(--vapor-color-gray-050)   |
| --vapor-color-background-overlay-100    | var(--vapor-color-canvas)     |
| --vapor-color-background-canvas-base    | var(--vapor-color-canvas)     |
| --vapor-color-background-canvas-sunken  | var(--vapor-color-gray-050)   |
| --vapor-color-background-canvas-raised  | #FAFAFA                       |
| --vapor-color-background-canvas-overlay | var(--vapor-color-canvas)     |
| --vapor-color-foreground-primary-100    | var(--vapor-color-blue-600)   |
| --vapor-color-foreground-primary-200    | var(--vapor-color-blue-700)   |
| --vapor-color-foreground-primary        | var(--vapor-color-blue-600)   |
| --vapor-color-foreground-primary-strong | var(--vapor-color-blue-700)   |
| --vapor-color-foreground-secondary-100  | var(--vapor-color-gray-800)   |
| --vapor-color-foreground-secondary-200  | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-secondary      | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-success-100    | var(--vapor-color-green-600)  |
| --vapor-color-foreground-success-200    | var(--vapor-color-green-700)  |
| --vapor-color-foreground-success        | var(--vapor-color-green-600)  |
| --vapor-color-foreground-success-strong | var(--vapor-color-green-700)  |
| --vapor-color-foreground-warning-100    | var(--vapor-color-orange-600) |
| --vapor-color-foreground-warning-200    | var(--vapor-color-orange-700) |
| --vapor-color-foreground-warning        | var(--vapor-color-orange-600) |
| --vapor-color-foreground-warning-strong | var(--vapor-color-orange-700) |
| --vapor-color-foreground-danger-100     | var(--vapor-color-red-600)    |
| --vapor-color-foreground-danger-200     | var(--vapor-color-red-700)    |
| --vapor-color-foreground-danger         | var(--vapor-color-red-600)    |
| --vapor-color-foreground-danger-strong  | var(--vapor-color-red-700)    |
| --vapor-color-foreground-hint-100       | var(--vapor-color-gray-600)   |
| --vapor-color-foreground-hint-200       | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-hint           | var(--vapor-color-gray-500)   |
| --vapor-color-foreground-contrast-100   | var(--vapor-color-gray-800)   |
| --vapor-color-foreground-contrast-200   | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-contrast       | var(--vapor-color-black)      |
| --vapor-color-foreground-normal-100     | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-normal-200     | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-normal         | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-inverse        | var(--vapor-color-white)      |
| --vapor-color-foreground-staticWhite    | var(--vapor-color-white)      |
| --vapor-color-foreground-staticBlack    | var(--vapor-color-black)      |
| --vapor-color-border-normal             | var(--vapor-color-gray-100)   |
| --vapor-color-border-primary            | var(--vapor-color-blue-500)   |
| --vapor-color-border-secondary          | var(--vapor-color-gray-200)   |
| --vapor-color-border-success            | var(--vapor-color-green-500)  |
| --vapor-color-border-warning            | var(--vapor-color-orange-500) |
| --vapor-color-border-danger             | var(--vapor-color-red-500)    |
| --vapor-color-border-hint               | var(--vapor-color-gray-600)   |
| --vapor-color-border-contrast           | var(--vapor-color-gray-800)   |
