토큰

색상 팔레트

번호가 붙은 모든 색상 단계, 고정 색조 별칭, 그 밖의 프리셋 색상 토큰입니다.

이 페이지의 내용

클래스

클래스	선언
`bg-<name>`	background-color: var(--color-`<name>`);
`fg-<name>`	color: var(--color-`<name>`);
`b-<name>`	border-color: var(--color-`<name>`);

다른 색상 계열 16개

클래스	선언
`bb-<name>`	border-bottom-color: var(--color-`<name>`);
`bl-<name>`	border-left-color: var(--color-`<name>`);
`br-<name>`	border-right-color: var(--color-`<name>`);
`bt-<name>`	border-top-color: var(--color-`<name>`);
`bx-<name>`	border-inline-color: var(--color-`<name>`);
`by-<name>`	border-block-color: var(--color-`<name>`);
`bxe-<name>`	border-inline-end-color: var(--color-`<name>`);
`bxs-<name>`	border-inline-start-color: var(--color-`<name>`);
`bye-<name>`	border-block-end-color: var(--color-`<name>`);
`bys-<name>`	border-block-start-color: var(--color-`<name>`);
`fill-<name>`	fill: var(--color-`<name>`);
`caret-<name>`	caret-color: var(--color-`<name>`);
`accent-<name>`	accent-color: var(--color-`<name>`);
`stroke-<name>`	stroke: var(--color-`<name>`);
`outline-<name>`	outline-color: var(--color-`<name>`);
`text-fill-color-<name>`	-webkit-text-fill-color: var(--color-`<name>`);

색상 클래스는 지정한 속성만 설정합니다. 테두리를 표시하려면 b(1) 같은 너비, b-solid 같은 스타일, b-blue-60 같은 색상을 함께 지정하세요. 색상 역할도 같은 계열을 사용하며 값은 별도 표에 나와 있습니다.

값

팔레트 번호는 토큰 키이며 불투명도나 명도의 백분율이 아닙니다. 번호가 클수록 OKLCH 명도가 낮습니다. 각 색상 견본에서 CSS 값 또는 변수 참조를 복사할 수 있으며, 아래 색조 별칭은 원래 정의된 토큰 참조를 유지합니다.

팔레트

색상 견본을 선택하면 원래 CSS 색상 값을 복사합니다.

복사 형식 색상 견본 건너뛰기

stone

gray

zinc

neutral

slate

brown

orange

amber

yellow

lime

green

beryl

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

crimson

red

색조 별칭

클래스	값
`bg-stone`	`var(--color-stone-30)`
`bg-gray`	`var(--color-gray-30)`
`bg-zinc`	`var(--color-zinc-30)`
`bg-neutral`	`var(--color-neutral-30)`
`bg-slate`	`var(--color-slate-30)`
`bg-brown`	`var(--color-brown-40)`
`bg-orange`	`var(--color-orange-40)`
`bg-amber`	`var(--color-amber-40)`
`bg-yellow`	`var(--color-yellow-40)`
`bg-lime`	`var(--color-lime-40)`
`bg-green`	`var(--color-green-40)`
`bg-beryl`	`var(--color-beryl-40)`
`bg-teal`	`var(--color-teal-40)`
`bg-cyan`	`var(--color-cyan-40)`
`bg-sky`	`var(--color-sky-60)`
`bg-blue`	`var(--color-blue-60)`
`bg-indigo`	`var(--color-indigo-60)`
`bg-violet`	`var(--color-violet-60)`
`bg-purple`	`var(--color-purple-60)`
`bg-fuchsia`	`var(--color-fuchsia-60)`
`bg-pink`	`var(--color-pink-60)`
`bg-crimson`	`var(--color-crimson-60)`
`bg-red`	`var(--color-red-60)`

기타 색상

클래스	값
`bg-white`	`oklch(100% 0 none)`
`bg-black`	`oklch(0% 0 none)`
`bg-current`	`currentColor`

색조 별칭은 고정된 단계를 선택합니다

bg-blue는 --color-blue를 참조하며 프리셋 값은 var(--color-blue-60)입니다. 반면 bg-yellow는 --color-yellow-40을 참조합니다. 별칭이 있다고 해서 모든 색조에서 같은 단계 번호를 사용하는 것은 아닙니다.

번호가 붙은 단계와 색조 별칭은 색 구성표에 따라 바뀌지 않습니다. fg-text-blue처럼 상황에 맞게 바뀌는 텍스트 별칭은 색상 역할에 속합니다. 토큰을 다시 정의하면 어느 쪽의 동작이든 변경할 수 있습니다.

bg-current는 currentColor를 참조하므로 결과는 요소의 텍스트 색상을 따릅니다. 프리셋에는 --color-transparent 토큰이 없습니다. 투명색이나 다른 색상 리터럴이 필요하면 (background-color:transparent) 또는 (background-color:#175fe9) 같은 네이티브 선언을 사용하세요.

관련 문서: 색상 역할, 네이티브 값과 불투명도.

사용 예

이 상태 레이블은 전경과 배경의 색상 단계를 명시합니다. 색상 없이도 단어만으로 의미를 알 수 있으며, 선택한 색상은 두 색 구성표에서 동일하게 유지됩니다.

Paid Pending Overdue Draft

<div>  <span class="… bg-green-5 fg-green-80">Paid</span>  <span class="… bg-amber-5 fg-amber-80">Pending</span>  <span class="… bg-red-5 fg-red-80">Overdue</span>  <span class="… bg-blue-5 fg-blue-70">Draft</span></div>

생성된 CSS

@layer theme {  :root,  :host {    --color-amber-5: oklch(96.24% .0573 98.1);    --color-amber-80: oklch(53.09% .1677 39.7);    --color-green-5: oklch(94.95% .071 145.5);    --color-green-80: oklch(51.96% .1768 142.5);    --color-blue-5: oklch(93.53% .0305 231.3);    --color-blue-70: oklch(46.26% .3057 266.7);    --color-red-5: oklch(94.05% .0239 17);    --color-red-80: oklch(53.09% .2178 29.2)  }}@layer utilities {  .bg-amber-5 {    background-color: var(--color-amber-5)  }  .bg-blue-5 {    background-color: var(--color-blue-5)  }  .bg-green-5 {    background-color: var(--color-green-5)  }  .bg-red-5 {    background-color: var(--color-red-5)  }  .fg-amber-80 {    color: var(--color-amber-80)  }  .fg-blue-70 {    color: var(--color-blue-70)  }  .fg-green-80 {    color: var(--color-green-80)  }  .fg-red-80 {    color: var(--color-red-80)  }}

사용자 정의

@theme에 색상을 등록하면 색상 계열에서 해당 키를 사용할 수 있습니다. 여기서 brand는 bg-brand, fg-brand, b-brand 등의 클래스에 사용할 수 있습니다.

@theme {  --color-brand: oklch(56% .2 262);}

생성된 CSS

@layer theme {  :root,  :host {    --color-brand: oklch(56% .2 262)  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }}

관련 문서: 테마 지시문, 색상.