# 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-secondary-100 | var(--vapor-color-gray-050) | | --vapor-color-background-secondary-200 | 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-warning-100 | var(--vapor-color-orange-100) | | --vapor-color-background-warning-200 | 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-hint-100 | var(--vapor-color-gray-100) | | --vapor-color-background-hint-200 | 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-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-foreground-primary-100 | var(--vapor-color-blue-600) | | --vapor-color-foreground-primary-200 | 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-success-100 | var(--vapor-color-green-600) | | --vapor-color-foreground-success-200 | 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-danger-100 | var(--vapor-color-red-600) | | --vapor-color-foreground-danger-200 | 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-contrast-100 | var(--vapor-color-gray-800) | | --vapor-color-foreground-contrast-200 | var(--vapor-color-gray-900) | | --vapor-color-foreground-normal-100 | var(--vapor-color-gray-700) | | --vapor-color-foreground-normal-200 | var(--vapor-color-gray-900) | | --vapor-color-foreground-inverse | var(--vapor-color-white) | | --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) |