색상

색상 (Colors)

PatternFly의 색상 팔레트는 Red Hat 브랜드 색상과 맞춰져 있으며, 콘텐츠를 강화하고 다양한 UI 요구에서 효과적인 소통을 지원하도록 설계됐어요. 색상은 의미 디자인 토큰(semantic design tokens)을 사용해 PatternFly 요소에 적용돼요. 이 가이드는 가장 흔한 시나리오 몇 가지에서 색상 사용에 대한 지침을 제공하지만, 모든 토큰을 다루지는 않아요. 추가 색상 사용 정보는 토큰 문서에 포함되어 있어요.

출처: 문서

본문

모든 디자인 토큰 보기

각 예시에는 설명 라벨, 의미 토큰, 색상 견본 원이 포함돼 있어요. 색상 견본 원을 선택하면 hex 코드와 사용 정보를 포함한 자세한 내용을 볼 수 있어요. 색상 견본은 브라우저 설정에 따라 라이트·다크 테마 색상에 맞춰 자동으로 업데이트돼요.

브랜드 색상 (Brand colors)

브랜드 색상은 브랜드를 식별하는 데 사용되며, UI 전반에서 가장 자주 사용되는 색상이에요. 우리의 브랜드 색상인 "PatternFly blue"는 모든 컴포넌트에서 사용돼요. 아이콘 토큰, 텍스트 토큰, 전역 색상 토큰 등 사용 사례에 따라 다양한 브랜드 토큰이 있어요.

• 기본 (Default): --pf-t--global--color--brand--default
• Hover: --pf-t--global--color--brand--hover
• 텍스트 (Text): --pf-t--global--text--color--brand--default

배경 색상 (Background colors)

배경 색상은 컴포넌트 전반에서, 때로는 특정 화면에서 사용돼요.

• 기본 (Primary): --pf-t--global--background--color--primary--default
• 기본 hover (Primary hover): --pf-t--global--background--color--primary--hover
• 보조 (Secondary): --pf-t--global--background--color--secondary--default
• 보조 hover (Secondary hover): --pf-t--global--background--color--secondary--hover

텍스트와 아이콘 색상 (Text and icon colors)

텍스트와 아이콘 색상은 서로 인라인으로 함께 사용될 수 있기 때문에 겹쳐요. 독립형 아이콘, 인라인 아이콘, 독립형 텍스트에는 서로 다른 토큰이 있다는 점에 유의하세요. 자세한 내용은 아이콘 및 타이포그래피 지침을 참고하세요.

텍스트와 아이콘은 또한 상태 정보를 표시할 수 있는데, 이는 상태 및 상태(state) 색상 섹션에서 다뤄요.

• 일반 텍스트 (Regular text): --pf-t--global--text--color--regular
• 미묘한 텍스트 (Subtle text): --pf-t--global--text--color--subtle
• 일반 아이콘 (Regular icons): --pf-t--global--icon--color--regular
• 링크 (Links): --pf-t--global--text--color--link--default

상태 및 상태 색상 (Status and state colors)

상태 색상은 UI를 통해 데이터와 동작을 사용자에게 전달하는 지표예요. PatternFly의 상태 색상은 기본(default), 위험(danger), 성공(success), 정보(information), 경고(warning) 상태와 비활성(disabled) 상태를 다뤄요.

Danger

• 기본 아이콘 (Default icons): --pf-t--global--icon--color--status--danger--default
• 기본 텍스트 (Default text): --pf-t--global--text--color--status--danger--default
• Hover: --pf-t--global--color--status--danger--hover

Warning

• 기본 아이콘 (Default icons): --pf-t--global--icon--color--status--warning--default
• 기본 텍스트 (Default text): --pf-t--global--text--color--status--warning--default
• Hover: --pf-t--global--color--status--warning--hover

Disabled

• 아이콘 (Icons): --pf-t--global--icon--color--disabled
• 텍스트 (Text): --pf-t--global--text--color--disabled
• 배경 (Backgrounds): --pf-t--global--background--color--disabled--default

상태 외 색상 (Nonstatus colors)

• 테두리 (Borders): --pf-t--global--border--color--nonstatus--teal--default
• 배경 (Backgrounds): --pf-t--global--color--nonstatus--purple--default
• Hover: --pf-t--global--color--nonstatus--green--hover

대비 비율 (Contrast ratios)

우리의 접근성 기준은 웹 콘텐츠 접근성 지침 2.2(WCAG 2.2)에서 AA 수준이에요. AA 수준 접근성을 달성하려면 UI 대비 비율이 일반 텍스트 4.5:1, 큰 텍스트 3:1, 그래픽 및 기타 UI 컴포넌트 3:1 이상이어야 해요. 추가로 hover 시 링크 텍스트 색상은 배경 색상과 기본 상태 링크 색상 양쪽 모두에서 충분한 대비를 가져야 해요.

배경과 텍스트 색상 사이의 대비를 확인하려면 WCAG AA 준수 도구를 사용하세요.

표준 대비 비율 외에도, 테마 지침에 문서화된 것처럼 고대비(high contrast)와 글라스(glass) 대비 모드를 지원해요.

색상 계열 (Color families)

색상 팔레트는 같은 색조의 다양한 음영(shades)을 포함하는 "계열(families)"로 구성돼요. 다음 계열에서 각 색상을 확장해 관련 토큰을 볼 수 있어요.

Gray 계열

• #FFFFFF — 의미 토큰:
  • --pf-t--color--white
  • --pf-t--global--background--color--action--plain--alt--clicked
  • --pf-t--global--background--color--action--plain--alt--hover
  • --pf-t--global--background--color--control--default
  • --pf-t--global--background--color--floating--default
  • --pf-t--global--background--color--primary--default
  • --pf-t--global--background--color--sticky--default
  • --pf-t--global--border--color--alt
  • --pf-t--global--border--color--main--default
  • --pf-t--global--color--status--read--on-secondary
  • --pf-t--global--icon--color--inverse
  • --pf-t--global--icon--color--on-brand--accent--clicked
  • --pf-t--global--icon--color--on-brand--accent--default
  • --pf-t--global--icon--color--on-brand--accent--hover
  • --pf-t--global--icon--color--on-brand--clicked
  • --pf-t--global--icon--color--on-brand--default
  • --pf-t--global--icon--color--on-brand--hover
  • --pf-t--global--icon--color--status--on-custom--clicked
  • --pf-t--global--icon--color--status--on-custom--default
  • --pf-t--global--icon--color--status--on-custom--hover
  • --pf-t--global--icon--color--status--on-danger--clicked
  • --pf-t--global--icon--color--status--on-danger--default
  • --pf-t--global--icon--color--status--on-danger--hover
  • --pf-t--global--icon--color--status--on-info--clicked
  • --pf-t--global--icon--color--status--on-info--default
  • --pf-t--global--icon--color--status--on-info--hover
  • --pf-t--global--icon--color--status--on-success--clicked
  • --pf-t--global--icon--color--status--on-success--default
  • --pf-t--global--icon--color--status--on-success--hover
  • --pf-t--global--icon--color--status--unread--on-attention--clicked
  • --pf-t--global--icon--color--status--unread--on-attention--default
  • --pf-t--global--icon--color--status--unread--on-attention--hover
  • --pf-t--global--icon--color--status--unread--on-default--clicked
  • --pf-t--global--icon--color--status--unread--on-default--default
  • --pf-t--global--icon--color--status--unread--on-default--hover
  • --pf-t--global--text--color--inverse
  • --pf-t--global--text--color--on-brand--accent--clicked
  • --pf-t--global--text--color--on-brand--accent--default
  • --pf-t--global--text--color--on-brand--accent--hover
  • --pf-t--global--text--color--on-brand--clicked
  • --pf-t--global--text--color--on-brand--default
  • --pf-t--global--text--color--on-brand--hover
  • --pf-t--global--text--color--status--on-custom--clicked
  • --pf-t--global--text--color--status--on-custom--default
  • --pf-t--global--text--color--status--on-custom--hover
  • --pf-t--global--text--color--status--on-danger--clicked
  • --pf-t--global--text--color--status--on-danger--default
  • --pf-t--global--text--color--status--on-danger--hover
  • --pf-t--global--text--color--status--on-info--clicked
  • --pf-t--global--text--color--status--on-info--default
  • --pf-t--global--text--color--status--on-info--hover
  • --pf-t--global--text--color--status--on-success--clicked
  • --pf-t--global--text--color--status--on-success--default
  • --pf-t--global--text--color--status--on-success--hover
  • --pf-t--global--text--color--status--unread--on-attention--clicked
  • --pf-t--global--text--color--status--unread--on-attention--default
  • --pf-t--global--text--color--status--unread--on-attention--hover
  • --pf-t--global--text--color--status--unread--on-default--clicked
  • --pf-t--global--text--color--status--unread--on-default--default
  • --pf-t--global--text--color--status--unread--on-default--hover
• #F2F2F2 — 의미 토큰:
  • --pf-t--global--background--color--control--read-only
  • --pf-t--global--background--color--floating--clicked
  • --pf-t--global--background--color--floating--hover
  • --pf-t--global--background--color--floating--secondary--default
  • --pf-t--global--background--color--primary--clicked
  • --pf-t--global--background--color--primary--hover
  • --pf-t--global--background--color--secondary--default
  • --pf-t--global--color--status--read--on-primary
• #E0E0E0 — 의미 토큰:
  • --pf-t--global--background--color--secondary--clicked
  • --pf-t--global--background--color--secondary--hover
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--subtle
  • --pf-t--global--color--nonstatus--gray--default
  • --pf-t--global--text-decoration--color--default
• #C7C7C7 — 의미 토큰:
  • --pf-t--global--background--color--disabled--default
  • --pf-t--global--border--color--control--read-only
  • --pf-t--global--border--color--nonstatus--gray--default
  • --pf-t--global--color--nonstatus--gray--clicked
  • --pf-t--global--color--nonstatus--gray--hover
  • --pf-t--global--icon--color--severity--undefined--default
• #A3A3A3 — 의미 토큰:
  • --pf-t--global--border--color--disabled
  • --pf-t--global--border--color--nonstatus--gray--clicked
  • --pf-t--global--border--color--nonstatus--gray--hover
  • --pf-t--global--icon--color--disabled
  • --pf-t--global--text--color--disabled
• #8C8C8C — 의미 토큰:
  • --pf-t--global--border--color--control--default
  • --pf-t--global--border--color--on-secondary
• #707070 — 의미 토큰:
  • --pf-t--global--icon--color--on-disabled
  • --pf-t--global--icon--color--severity--minor--default
  • --pf-t--global--icon--color--subtle
  • --pf-t--global--text--color--on-disabled
• #4D4D4D — 의미 토큰:
  • --pf-t--global--text--color--placeholder
  • --pf-t--global--text--color--subtle
• #383838 — 의미 토큰:
  • --pf-t--global--background--color--inverse--clicked
  • --pf-t--global--background--color--inverse--hover
• #292929 — 의미 토큰:
  • --pf-t--global--background--color--inverse--default
• #1F1F1F — 의미 토큰:
  • --pf-t--global--icon--color--nonstatus--on-blue--clicked
  • --pf-t--global--icon--color--nonstatus--on-blue--default
  • --pf-t--global--icon--color--nonstatus--on-blue--hover
  • --pf-t--global--icon--color--nonstatus--on-gray--clicked
  • --pf-t--global--icon--color--nonstatus--on-gray--default
  • --pf-t--global--icon--color--nonstatus--on-gray--hover
  • --pf-t--global--icon--color--nonstatus--on-green--clicked
  • --pf-t--global--icon--color--nonstatus--on-green--default
  • --pf-t--global--icon--color--nonstatus--on-green--hover
  • --pf-t--global--icon--color--nonstatus--on-orange--clicked
  • --pf-t--global--icon--color--nonstatus--on-orange--default
  • --pf-t--global--icon--color--nonstatus--on-orange--hover
  • --pf-t--global--icon--color--nonstatus--on-orangered--clicked
  • --pf-t--global--icon--color--nonstatus--on-orangered--default
  • --pf-t--global--icon--color--nonstatus--on-orangered--hover
  • --pf-t--global--icon--color--nonstatus--on-purple--clicked
  • --pf-t--global--icon--color--nonstatus--on-purple--default
  • --pf-t--global--icon--color--nonstatus--on-purple--hover
  • --pf-t--global--icon--color--nonstatus--on-red--clicked
  • --pf-t--global--icon--color--nonstatus--on-red--default
  • --pf-t--global--icon--color--nonstatus--on-red--hover
  • --pf-t--global--icon--color--nonstatus--on-teal--clicked
  • --pf-t--global--icon--color--nonstatus--on-teal--default
  • --pf-t--global--icon--color--nonstatus--on-teal--hover
  • --pf-t--global--icon--color--nonstatus--on-yellow--clicked
  • --pf-t--global--icon--color--nonstatus--on-yellow--default
  • --pf-t--global--icon--color--nonstatus--on-yellow--hover
  • --pf-t--global--icon--color--on-brand--subtle--clicked
  • --pf-t--global--icon--color--on-brand--subtle--default
  • --pf-t--global--icon--color--on-brand--subtle--hover
  • --pf-t--global--icon--color--regular
  • --pf-t--global--icon--color--status--on-warning--clicked
  • --pf-t--global--icon--color--status--on-warning--default
  • --pf-t--global--icon--color--status--on-warning--hover
• #151515 — 의미 토큰:
  • --pf-t--global--text--color--nonstatus--on-blue--clicked
  • --pf-t--global--text--color--nonstatus--on-blue--default
  • --pf-t--global--text--color--nonstatus--on-blue--hover
  • --pf-t--global--text--color--nonstatus--on-gray--clicked
  • --pf-t--global--text--color--nonstatus--on-gray--default
  • --pf-t--global--text--color--nonstatus--on-gray--hover
  • --pf-t--global--text--color--nonstatus--on-green--clicked
  • --pf-t--global--text--color--nonstatus--on-green--default
  • --pf-t--global--text--color--nonstatus--on-green--hover
  • --pf-t--global--text--color--nonstatus--on-orange--clicked
  • --pf-t--global--text--color--nonstatus--on-orange--default
  • --pf-t--global--text--color--nonstatus--on-orange--hover
  • --pf-t--global--text--color--nonstatus--on-orangered--clicked
  • --pf-t--global--text--color--nonstatus--on-orangered--default
  • --pf-t--global--text--color--nonstatus--on-orangered--hover
  • --pf-t--global--text--color--nonstatus--on-purple--clicked
  • --pf-t--global--text--color--nonstatus--on-purple--default
  • --pf-t--global--text--color--nonstatus--on-purple--hover
  • --pf-t--global--text--color--nonstatus--on-red--clicked
  • --pf-t--global--text--color--nonstatus--on-red--default
  • --pf-t--global--text--color--nonstatus--on-red--hover
  • --pf-t--global--text--color--nonstatus--on-teal--clicked
  • --pf-t--global--text--color--nonstatus--on-teal--default
  • --pf-t--global--text--color--nonstatus--on-teal--hover
  • --pf-t--global--text--color--nonstatus--on-yellow--clicked
  • --pf-t--global--text--color--nonstatus--on-yellow--default
  • --pf-t--global--text--color--nonstatus--on-yellow--hover
  • --pf-t--global--text--color--on-brand--subtle--clicked
  • --pf-t--global--text--color--on-brand--subtle--default
  • --pf-t--global--text--color--on-brand--subtle--hover
  • --pf-t--global--text--color--on-highlight
  • --pf-t--global--text--color--regular
  • --pf-t--global--text--color--status--on-warning--clicked
  • --pf-t--global--text--color--status--on-warning--default
  • --pf-t--global--text--color--status--on-warning--hover
• #000000 — 의미 토큰:
  • --pf-t--color--black

Blue 계열

• #E0F0FF — 의미 토큰:
  • --pf-t--global--color--brand--subtle--default
• #B9DAFC — 의미 토큰:
  • --pf-t--global--border--color--brand--subtle--default
  • --pf-t--global--color--brand--subtle--clicked
  • --pf-t--global--color--brand--subtle--hover
  • --pf-t--global--color--nonstatus--blue--default
• #92C5F9 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--blue--default
  • --pf-t--global--color--nonstatus--blue--clicked
  • --pf-t--global--color--nonstatus--blue--hover
• #4394E5 — 의미 토큰:
  • --pf-t--global--border--color--brand--subtle--clicked
  • --pf-t--global--border--color--brand--subtle--hover
  • --pf-t--global--border--color--hover
  • --pf-t--global--border--color--nonstatus--blue--clicked
  • --pf-t--global--border--color--nonstatus--blue--hover
  • --pf-t--global--icon--color--severity--none--default
• #0066CC — 의미 토큰:
  • --pf-t--global--border--color--brand--accent--default
  • --pf-t--global--border--color--brand--default
  • --pf-t--global--border--color--clicked
  • --pf-t--global--color--brand--accent--default
  • --pf-t--global--color--brand--default
  • --pf-t--global--color--status--unread--default
  • --pf-t--global--focus-ring--color--default
  • --pf-t--global--icon--color--brand--accent--default
  • --pf-t--global--icon--color--brand--default
  • --pf-t--global--text--color--brand--default
  • --pf-t--global--text--color--link--default
• #004D99 — 의미 토큰:
  • --pf-t--global--border--color--brand--accent--clicked
  • --pf-t--global--border--color--brand--accent--hover
  • --pf-t--global--border--color--brand--clicked
  • --pf-t--global--border--color--brand--hover
  • --pf-t--global--color--brand--accent--clicked
  • --pf-t--global--color--brand--accent--hover
  • --pf-t--global--color--brand--clicked
  • --pf-t--global--color--brand--hover
  • --pf-t--global--color--status--unread--clicked
  • --pf-t--global--color--status--unread--hover
  • --pf-t--global--icon--color--brand--accent--clicked
  • --pf-t--global--icon--color--brand--accent--hover
  • --pf-t--global--icon--color--brand--clicked
  • --pf-t--global--icon--color--brand--hover
  • --pf-t--global--text--color--brand--clicked
  • --pf-t--global--text--color--brand--hover
  • --pf-t--global--text--color--link--hover
• #003366 — 의미 토큰 없음
• #032142 — 의미 토큰 없음

Green 계열

• #E9F7DF — 의미 토큰 없음
• #D1F1BB — 의미 토큰:
  • --pf-t--global--color--nonstatus--green--default
• #AFDC8F — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--green--default
  • --pf-t--global--color--nonstatus--green--clicked
  • --pf-t--global--color--nonstatus--green--hover
• #87BB62 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--green--clicked
  • --pf-t--global--border--color--nonstatus--green--hover
• #63993D — 의미 토큰 없음
• #3D7317 — 의미 토큰:
  • --pf-t--global--border--color--status--success--default
  • --pf-t--global--color--status--success--default
  • --pf-t--global--icon--color--status--success--default
  • --pf-t--global--text--color--status--success--default
• #204D00 — 의미 토큰:
  • --pf-t--global--border--color--status--success--clicked
  • --pf-t--global--border--color--status--success--hover
  • --pf-t--global--color--status--success--clicked
  • --pf-t--global--color--status--success--hover
  • --pf-t--global--icon--color--status--success--clicked
  • --pf-t--global--icon--color--status--success--hover
  • --pf-t--global--text--color--status--success--clicked
  • --pf-t--global--text--color--status--success--hover
• #183301 — 의미 토큰 없음

Teal 계열

• #DAF2F2 — 의미 토큰 없음
• #B9E5E5 — 의미 토큰:
  • --pf-t--global--color--nonstatus--teal--default
• #9AD8D8 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--teal--default
  • --pf-t--global--color--nonstatus--teal--clicked
  • --pf-t--global--color--nonstatus--teal--hover
• #63BDBD — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--teal--clicked
  • --pf-t--global--border--color--nonstatus--teal--hover
• #37A3A3 — 의미 토큰 없음
• #147878 — 의미 토큰:
  • --pf-t--global--border--color--status--custom--default
  • --pf-t--global--color--status--custom--default
  • --pf-t--global--icon--color--status--custom--default
  • --pf-t--global--text--color--status--custom--default
• #004D4D — 의미 토큰:
  • --pf-t--global--border--color--status--custom--clicked
  • --pf-t--global--border--color--status--custom--hover
  • --pf-t--global--color--status--custom--clicked
  • --pf-t--global--color--status--custom--hover
  • --pf-t--global--icon--color--status--custom--clicked
  • --pf-t--global--icon--color--status--custom--hover
  • --pf-t--global--text--color--status--custom--clicked
  • --pf-t--global--text--color--status--custom--hover
• #003333 — 의미 토큰 없음

Purple 계열

• #ECE6FF — 의미 토큰 없음
• #D0C5F4 — 의미 토큰:
  • --pf-t--global--color--nonstatus--purple--default
• #B6A6E9 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--purple--default
  • --pf-t--global--color--nonstatus--purple--clicked
  • --pf-t--global--color--nonstatus--purple--hover
• #876FD4 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--purple--clicked
  • --pf-t--global--border--color--nonstatus--purple--hover
• #5E40BE — 의미 토큰:
  • --pf-t--global--border--color--status--info--default
  • --pf-t--global--color--status--info--default
  • --pf-t--global--icon--color--status--info--default
  • --pf-t--global--text--color--link--visited
  • --pf-t--global--text--color--status--info--default
• #3D2785 — 의미 토큰:
  • --pf-t--global--border--color--status--info--clicked
  • --pf-t--global--border--color--status--info--hover
  • --pf-t--global--color--status--info--clicked
  • --pf-t--global--color--status--info--hover
  • --pf-t--global--icon--color--status--info--clicked
  • --pf-t--global--icon--color--status--info--hover
  • --pf-t--global--text--color--status--info--clicked
  • --pf-t--global--text--color--status--info--hover
• #21134D — 의미 토큰 없음
• #1B0D33 — 의미 토큰 없음

Yellow 계열

• #FFF4CC — 의미 토큰 없음
• #FFE072 — 의미 토큰:
  • --pf-t--global--color--nonstatus--yellow--default
• #FFCC17 — 의미 토큰:
  • --pf-t--global--background--color--highlight--default
  • --pf-t--global--border--color--nonstatus--yellow--default
  • --pf-t--global--color--favorite--default
  • --pf-t--global--color--nonstatus--yellow--clicked
  • --pf-t--global--color--nonstatus--yellow--hover
  • --pf-t--global--color--status--warning--default
  • --pf-t--global--icon--color--favorite--default
• #DCA614 — 의미 토큰:
  • --pf-t--global--background--color--highlight--clicked
  • --pf-t--global--border--color--nonstatus--yellow--clicked
  • --pf-t--global--border--color--nonstatus--yellow--hover
  • --pf-t--global--border--color--status--warning--default
  • --pf-t--global--color--favorite--clicked
  • --pf-t--global--color--favorite--hover
  • --pf-t--global--color--status--warning--clicked
  • --pf-t--global--color--status--warning--hover
  • --pf-t--global--icon--color--favorite--clicked
  • --pf-t--global--icon--color--favorite--hover
  • --pf-t--global--icon--color--severity--moderate--default
  • --pf-t--global--icon--color--status--warning--default
  • --pf-t--global--text--color--status--warning--default
• #B98412 — 의미 토큰:
  • --pf-t--global--border--color--status--warning--clicked
  • --pf-t--global--border--color--status--warning--hover
  • --pf-t--global--icon--color--status--warning--clicked
  • --pf-t--global--icon--color--status--warning--hover
  • --pf-t--global--text--color--status--warning--clicked
  • --pf-t--global--text--color--status--warning--hover
• #96640F — 의미 토큰 없음
• #73480B — 의미 토큰 없음
• #54330B — 의미 토큰 없음

Orange 계열

• #FFE8CC — 의미 토큰 없음
• #FCCB8F — 의미 토큰:
  • --pf-t--global--color--nonstatus--orange--default
• #F8AE54 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--orange--default
  • --pf-t--global--color--nonstatus--orange--clicked
  • --pf-t--global--color--nonstatus--orange--hover
• #F5921B — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--orange--clicked
  • --pf-t--global--border--color--nonstatus--orange--hover
• #CA6C0F — 의미 토큰:
  • --pf-t--global--icon--color--severity--important--default
• #9E4A06 — 의미 토큰 없음
• #732E00 — 의미 토큰 없음
• #4D1F00 — 의미 토큰 없음

Red 계열

• #FEF0F0 — 의미 토큰 없음
• #FCE3E3 — 의미 토큰 없음
• #FBC5C5 — 의미 토큰:
  • --pf-t--global--color--nonstatus--red--default
• #F9A8A8 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--red--default
  • --pf-t--global--color--nonstatus--red--clicked
  • --pf-t--global--color--nonstatus--red--hover
• #F56E6E — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--red--clicked
  • --pf-t--global--border--color--nonstatus--red--hover
• #EE0000 — 의미 토큰 없음
• #A60000 — 의미 토큰 없음
• #5F0000 — 의미 토큰 없음
• #3F0000 — 의미 토큰 없음

Red orange 계열

• #FFE3D9 — 의미 토큰 없음
• #FBBEA8 — 의미 토큰:
  • --pf-t--global--color--nonstatus--orangered--default
• #F89B78 — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--orangered--default
  • --pf-t--global--color--nonstatus--orangered--clicked
  • --pf-t--global--color--nonstatus--orangered--hover
• #F4784A — 의미 토큰:
  • --pf-t--global--border--color--nonstatus--orangered--clicked
  • --pf-t--global--border--color--nonstatus--orangered--hover
  • --pf-t--global--text--color--required
• #F0561D — 의미 토큰 없음
• #B1380B — 의미 토큰:
  • --pf-t--global--border--color--status--danger--default
  • --pf-t--global--color--status--danger--default
  • --pf-t--global--color--status--unread--attention--default
  • --pf-t--global--icon--color--severity--critical--default
  • --pf-t--global--icon--color--status--danger--default
  • --pf-t--global--text--color--status--danger--default
• #731F00 — 의미 토큰:
  • --pf-t--global--border--color--status--danger--clicked
  • --pf-t--global--border--color--status--danger--hover
  • --pf-t--global--color--status--danger--clicked
  • --pf-t--global--color--status--danger--hover
  • --pf-t--global--color--status--unread--attention--clicked
  • --pf-t--global--color--status--unread--attention--hover
  • --pf-t--global--icon--color--status--danger--clicked
  • --pf-t--global--icon--color--status--danger--hover
  • --pf-t--global--text--color--status--danger--clicked
  • --pf-t--global--text--color--status--danger--hover
• #4C1405 — 의미 토큰 없음

더 알아보기 (Learn more)