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

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

***

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

| token                                   | value      |
| --------------------------------------- | ---------- |
| --vapor-color-black                     | #000000    |
| --vapor-color-white                     | #ffffff    |
| --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-gray-950                  | #252730    |
| --vapor-color-gray-000                  | #ffffff    |
| --vapor-color-gray-050                  | #f7f7f7    |
| --vapor-color-gray-rgb-950              | 37, 39, 48 |
| --vapor-color-red-100                   | #ffd8d7    |
| --vapor-color-red-200                   | #ffb3b2    |
| --vapor-color-red-300                   | #fc7d7f    |
| --vapor-color-red-400                   | #f8636a    |
| --vapor-color-red-500                   | #d54049    |
| --vapor-color-red-600                   | #b12932    |
| --vapor-color-red-700                   | #971622    |
| --vapor-color-red-800                   | #79000c    |
| --vapor-color-red-900                   | #560000    |
| --vapor-color-red-050                   | #fff5f4    |
| --vapor-color-pink-100                  | #ffd8e2    |
| --vapor-color-pink-200                  | #ffb1c6    |
| --vapor-color-pink-300                  | #f77ca3    |
| --vapor-color-pink-400                  | #f26394    |
| --vapor-color-pink-500                  | #ca4676    |
| --vapor-color-pink-600                  | #aa2d5d    |
| --vapor-color-pink-700                  | #92194d    |
| --vapor-color-pink-800                  | #760037    |
| --vapor-color-pink-900                  | #54001e    |
| --vapor-color-pink-050                  | #fff5f7    |
| --vapor-color-grape-100                 | #f4d8fb    |
| --vapor-color-grape-200                 | #e9b4f7    |
| --vapor-color-grape-300                 | #d883ef    |
| --vapor-color-grape-400                 | #d06bea    |
| --vapor-color-grape-500                 | #b148cb    |
| --vapor-color-grape-600                 | #922fab    |
| --vapor-color-grape-700                 | #7d1c94    |
| --vapor-color-grape-800                 | #640079    |
| --vapor-color-grape-900                 | #450059    |
| --vapor-color-grape-050                 | #fcf5fe    |
| --vapor-color-violet-100                | #e1deff    |
| --vapor-color-violet-200                | #c8bffe    |
| --vapor-color-violet-300                | #a796fa    |
| --vapor-color-violet-400                | #9a83f8    |
| --vapor-color-violet-500                | #805ceb    |
| --vapor-color-violet-600                | #6843c8    |
| --vapor-color-violet-700                | #5731b0    |
| --vapor-color-violet-800                | #441a94    |
| --vapor-color-violet-900                | #300077    |
| --vapor-color-violet-050                | #f6f5ff    |
| --vapor-color-blue-100                  | #cee3ff    |
| --vapor-color-blue-200                  | #a4c9ff    |
| --vapor-color-blue-300                  | #69a4ff    |
| --vapor-color-blue-400                  | #4e94ff    |
| --vapor-color-blue-500                  | #3174dc    |
| --vapor-color-blue-600                  | #1d5aba    |
| --vapor-color-blue-700                  | #0e47a3    |
| --vapor-color-blue-800                  | #003288    |
| --vapor-color-blue-900                  | #001b71    |
| --vapor-color-blue-050                  | #f1f7ff    |
| --vapor-color-cyan-100                  | #c2e8f0    |
| --vapor-color-cyan-200                  | #84d2e2    |
| --vapor-color-cyan-300                  | #1cb3cb    |
| --vapor-color-cyan-400                  | #17a3ba    |
| --vapor-color-cyan-500                  | #0d8298    |
| --vapor-color-cyan-600                  | #04677b    |
| --vapor-color-cyan-700                  | #005468    |
| --vapor-color-cyan-800                  | #003f51    |
| --vapor-color-cyan-900                  | #002a3c    |
| --vapor-color-cyan-050                  | #eef9fb    |
| --vapor-color-green-100                 | #cde8dd    |
| --vapor-color-green-200                 | #9cd2bd    |
| --vapor-color-green-300                 | #55b495    |
| --vapor-color-green-400                 | #28a784    |
| --vapor-color-green-500                 | #058765    |
| --vapor-color-green-600                 | #046b4c    |
| --vapor-color-green-700                 | #01583c    |
| --vapor-color-green-800                 | #004229    |
| --vapor-color-green-900                 | #002d16    |
| --vapor-color-green-050                 | #f0f8f5    |
| --vapor-color-lime-100                  | #c9eca8    |
| --vapor-color-lime-200                  | #9ad84a    |
| --vapor-color-lime-300                  | #75b51f    |
| --vapor-color-lime-400                  | #67a519    |
| --vapor-color-lime-500                  | #4c850e    |
| --vapor-color-lime-600                  | #366a03    |
| --vapor-color-lime-700                  | #265700    |
| --vapor-color-lime-800                  | #114300    |
| --vapor-color-lime-900                  | #002e00    |
| --vapor-color-lime-050                  | #f1fae8    |
| --vapor-color-yellow-100                | #ffdd95    |
| --vapor-color-yellow-200                | #fbbd06    |
| --vapor-color-yellow-300                | #d69902    |
| --vapor-color-yellow-400                | #c58a01    |
| --vapor-color-yellow-500                | #a26c01    |
| --vapor-color-yellow-600                | #855300    |
| --vapor-color-yellow-700                | #714100    |
| --vapor-color-yellow-800                | #5b2d00    |
| --vapor-color-yellow-900                | #461900    |
| --vapor-color-yellow-050                | #fff7e7    |
| --vapor-color-orange-100                | #ffd9c8    |
| --vapor-color-orange-200                | #fcb797    |
| --vapor-color-orange-300                | #f4864f    |
| --vapor-color-orange-400                | #ef6f25    |
| --vapor-color-orange-500                | #cd4d0a    |
| --vapor-color-orange-600                | #ab3406    |
| --vapor-color-orange-700                | #932103    |
| --vapor-color-orange-800                | #780600    |
| --vapor-color-orange-900                | #570000    |
| --vapor-color-orange-050                | #fff6f1    |
| --vapor-color-background-primary-100    | #cee3ff    |
| --vapor-color-background-primary-200    | #3174dc    |
| --vapor-color-background-secondary-100  | #f7f7f7    |
| --vapor-color-background-secondary-200  | #e1e1e1    |
| --vapor-color-background-success-100    | #cde8dd    |
| --vapor-color-background-success-200    | #058765    |
| --vapor-color-background-warning-100    | #ffd9c8    |
| --vapor-color-background-warning-200    | #cd4d0a    |
| --vapor-color-background-danger-100     | #ffd8d7    |
| --vapor-color-background-danger-200     | #d54049    |
| --vapor-color-background-hint-100       | #e1e1e1    |
| --vapor-color-background-hint-200       | #5d5d5d    |
| --vapor-color-background-contrast-100   | #c6c6c6    |
| --vapor-color-background-contrast-200   | #393939    |
| --vapor-color-background-canvas         | #ffffff    |
| --vapor-color-background-surface-100    | #ffffff    |
| --vapor-color-background-surface-200    | #f7f7f7    |
| --vapor-color-foreground-primary-100    | #1d5aba    |
| --vapor-color-foreground-primary-200    | #0e47a3    |
| --vapor-color-foreground-secondary-100  | #393939    |
| --vapor-color-foreground-secondary-200  | #262626    |
| --vapor-color-foreground-success-100    | #046b4c    |
| --vapor-color-foreground-success-200    | #01583c    |
| --vapor-color-foreground-warning-100    | #ab3406    |
| --vapor-color-foreground-warning-200    | #932103    |
| --vapor-color-foreground-danger-100     | #b12932    |
| --vapor-color-foreground-danger-200     | #971622    |
| --vapor-color-foreground-hint-100       | #5d5d5d    |
| --vapor-color-foreground-hint-200       | #4c4c4c    |
| --vapor-color-foreground-contrast-100   | #393939    |
| --vapor-color-foreground-contrast-200   | #262626    |
| --vapor-color-foreground-normal-100     | #4c4c4c    |
| --vapor-color-foreground-normal-200     | #262626    |
| --vapor-color-border-normal             | #e1e1e1    |
| --vapor-color-border-primary            | #3174dc    |
| --vapor-color-border-secondary          | #c6c6c6    |
| --vapor-color-border-success            | #058765    |
| --vapor-color-border-warning            | #cd4d0a    |
| --vapor-color-border-danger             | #d54049    |
| --vapor-color-border-hint               | #5d5d5d    |
| --vapor-color-border-contrast           | #393939    |
| --vapor-color-logo-normal               | #262626    |
| --vapor-color-button-foreground-primary | #ffffff    |