https://www.patternfly.org/js/foundations-and-styles/colors/design-guidelines/index.d4afb3fa.bundle.js

1"use strict";(self.webpackChunkpatternfly_org=self.webpackChunkpatternfly_org||[]).push([["18064"],{9387(e,t,a){a.r(t),a.d(t,{default:()=>M});var l=a(514041),o=a(432639);let n=a.p+"images/ddae05a3.png",r=a.p+"images/61324ae7.png",s=a.p+"images/b63a1225.png",c=a.p+"images/eb6959da.png",i=a.p+"images/26189345.png",d=a.p+"images/faac63f0.png",m=a.p+"images/a485086f.png";var u=a(307143),h=a(414893),p=a(671970),g=a(329440),f=a(630543),E=a(99455),b=a(414492),v=a(185151),y=a(417599),w=a(479595),x=a(676369),k=a(668061),N=a(56389),U=a(570983),C=a(452810),F=a(490820),_=a(197721),G=a(821355),A=a(375336),B=a(132466);function L(e){if((e=e.toUpperCase()).startsWith("#")){let t=e.substr(1);return 3===t.length?t.split("").map(e=>e.repeat(2)).join(""):t}}function T(e){return(e=parseInt(e,16)/255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)}function I(e){return .2126*T(e.substr(0,2))+.7152*T(e.substr(2,2))+.0722*T(e.substr(4,2))}function P(e,t){return e=L(e),t=L(t),(I(e)+.05)/(I(t)+.05)}function S(){return(S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)({}).hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e}).apply(null,arguments)}function z({label:e,color:t,caption:a,children:o}){let n=C.A[":root"][t.substr(8).replace(/-+/g,"_")],r=l.createElement(E.B,{hasGutter:!0},l.createElement(F.a,null,l.createElement(_.h,{headingLevel:"h3",size:"md"},"Token"),l.createElement("code",{className:"ws-code pf-v6-u-font-size-xs"},t)),n&&l.createElement(F.a,null,l.createElement(_.h,{headingLevel:"h3",size:"md"},"Hex value"),l.createElement("pC",null,`#${L(n.value)}`)),l.createElement(F.a,null,l.createElement(_.h,{headingLevel:"h3",size:"md"},"Usage"),l.createElement("p",null,o)));return l.createElement(G.B,{hasGutter:!0},l.createElement(A.o,null,l.createElement(B.A,{position:"right","aria-label":"Token",bodyContent:r,footerContent:l.createElement("a",{href:"/tokens/all-patternfly-tokens"},"All tokens"),hasAutoWidth:!0},l.createElement(f.$n,S({variant:"plain","aria-label":`Token info for ${t}`},"--pf-t--global--background--color--primary--default"===t&&{style:{backgroundColor:"var(--pf-t--global--background--color--primary--hover)"}}),l.createElement("svg",{width:"44px",height:"44px",viewBox:"0 0 44 44"},l.createElement("circle",{cx:"22",cy:"22",r:"22",style:{fill:`var(${t})`,stroke:"var(--pf-v6-global--palette--black-300)"}}))))),l.createElement(A.o,{isFilled:!0},l.createElement(_.h,{headingLevel:"h3",size:"md"},e||n&&`#${L(n.value)}`," ",a&&`(${a})`),l.createElement("code",{className:"ws-code pf-v6-u-font-size-xs"},t)))}var $=a(601918),O=a(90049),D=a(161694),R=a(813973),H=a(348774);function j({title:e,family:t}){let[a,o]=l.useState([]),n=C.A[":root"],r=Object.values(n).filter(e=>e.name.includes(`--pf-t--color--${t}--`));if("gray"===t){let e=n.t_color_white;r.unshift(e);let t=n.t_color_black;r.push(t)}return l.createElement(l.Fragment,null,l.createElement(_.h,{headingLevel:"h3"},e),l.createElement($.n,{togglePosition:"start"},r.map(e=>{let t=a.includes(e.name),r={"--pf-v6-c-accordion__toggle--BackgroundColor":`var(${e.name})`,"--pf-v6-c-accordion__toggle--hover--BackgroundColor":`var(${e.name})`,fontSize:"var(--pf-t--global--font--size--md)"};P(e.value,"#151515")>4.5?r["--pf-v6-c-accordion__toggle-text--Color"]="#151515":4.5>=P(e.value,"#151515")&&(r["--pf-v6-c-accordion__toggle-text--Color"]="#FFFFFF");let s=Object.values(n).filter(t=>t.value===e.value&&!/\d/.test(t.name)).map(e=>e.name).sort();return l.createElement(O.A,{key:e.name,isExpanded:t,style:r},l.createElement(D.P,{onClick:()=>{var t;return t=e.name,void(a.includes(t)?o(a.filter(e=>e!==t)):o(a.concat(t)))},id:e.value.replace("#","color-"),style:{backgroundColor:`${e.value} !important`,color:r["--pf-v6-c-accordion__toggle-text--Color"]}},"#",L(e.value.toUpperCase())),l.createElement(R.u,null,s?.length>0?l.createElement(l.Fragment,null,l.createElement(_.h,{headingLevel:"h4",size:"md"},"Semantic tokens",l.createElement("span",{className:"pf-v6-screen-reader"},"for ",e.value.toUpperCase())),l.createElement(H.U,{isEditorial:!0,className:"pf-v6-u-m-sm",component:H.u.ol,isPlainList:!0},s.map(e=>l.createElement(H.U,{isEditorial:!0,component:H.u.li,key:e},e)))):l.createElement(_.h,{headingLevel:"h4",size:"md"},"No semantic tokens",l.createElement("span",{className:"pf-v6-screen-reader"},"for ",e.value.toUpperCase()))))})))}let W={id:"Colors",section:"foundations-and-styles",subsection:"",deprecated:!1,template:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"design-guidelines",tabName:null,slug:"/foundations-and-styles/colors/design-guidelines",sourceLink:"https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/fou

1ndations-and-styles/styles/colors/colors.md",relPath:"packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md"};W.liveContext={Alert:u.F,Grid:h.x,GridItem:p.E,Banner:g.l,Button:f.$n,Stack:E.B,Table:b.X,Caption:v.H,Thead:y.d,Tr:w.Tr,Th:x.Th,Tbody:k.N,Td:N.Td,ArrowRightIcon:U.Ay,ColorSwatch:z,ColorFamily:j},W.relativeImports="import { ColorSwatch } from 'content/foundations-and-styles/styles/colors/./ColorSwatch.jsx';,import { ColorFamily } from 'content/foundations-and-styles/styles/colors/./ColorFamily.jsx';",W.examples={};let q=()=>l.createElement(l.Fragment,null,l.createElement(o.x5,{id:"patternflys-palette",headingLevel:"h1",className:"ws-title ws-h1"},"PatternFly's palette"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Our color palettes align with ",l.createElement("a",{href:"https://www.redhat.com/en/about/brand/standards/color",target:"_blank",alt:"Red Hat brand colors"}," Red Hat's brand colors ")," and are designed to reinforce content and support effective communication across different UI needs. Colors are applied to PatternFly elements using ",l.createElement(o.N_,{to:"/foundations-and-styles/design-tokens/overview",className:""},"semantic design tokens.")," This guide offers guidance for color use in some of the most common scenarios, but it does not cover all tokens. Additional color usage information is included in our tokens documentation."),l.createElement("div",null,l.createElement(f.$n,{component:"a",href:"/foundations-and-styles/design-tokens/all-design-tokens",variant:"link",isInline:!0},"View all design tokens ",l.createElement(U.Ay,null))),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Each example contains a descriptive label, a semantic token, and a color swatch circle. If you select a color swatch circle, you can see more details, including a hex code and usage information. Color swatches will automatically update to match light or dark theme colors, based on your browser settings."),l.createElement(o.x5,{id:"brand-colors",headingLevel:"h2",className:"ws-title ws-h2"},"Brand colors"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},'Brand colors are used to identify your brand, and are the colors most frequently used across your UI. Our brand color, "PatternFly blue", is used across all components. There are different brand tokens depending on the use case, like icon tokens, text tokens, global color tokens, and so on.'),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{label:"Default",color:"--pf-t--global--color--brand--default"},"Use to reinforce your brand. Often indicates a default or active state."),l.createElement(z,{label:"Hover",color:"--pf-t--global--color--brand--hover"},"Use for branded elements that are in a hover/focus state."),l.createElement(z,{label:"Text",color:"--pf-t--global--text--color--brand--default"},"Use for branded text elements."))),l.createElement(p.E,{span:7},l.createElement("img",{src:n,width:n.width||void 0,height:n.height||void 0,alt:"PatternFly blue colors",className:"ws-img "}))),l.createElement(o.x5,{id:"background-colors",headingLevel:"h2",className:"ws-title ws-h2"},"Background colors"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Background colors are used throughout components and, occasionally, for certain screens."),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{label:"Primary",color:"--pf-t--global--background--color--primary--default"},"Use as the primary background color for UI content such as cards, page sections, and other content areas."),l.createElement(z,{label:"Primary hover",color:"--pf-t--global--background--color--primary--hover"},"Use as the hover color for primary-colored backgrounds."),l.createElement(z,{label:"Secondary",color:"--pf-t--global--background--color--secondary--default"},"Use as the secondary color for UI content. Also use for UI shell backgrounds, like navigation and mastheads."),l.createElement(z,{label:"Secondary hover",color:"--pf-t--global--background--color--secondary--hover"},"Use as the hover color for secondary-colored backgrounds."))),l.createElement(p.E,{span:7},l.createElement("img",{src:r,width:r.width||void 0,height:r.height||void 0,alt:"PatternFly background colors",className:"ws-img "}))),l.createElement(o.x5,{id:"text-and-icon-colors",headingLevel:"h2",className:"ws-title ws-h2"},"Text and icon colors"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Text and icon colors overlap, because they can be used inline with each other. Note that there are different tokens for standalone icons, inline icons, and standalone text. For more details view our ",l.createElement(o.N_,{to:"/foundations-and-styles/iconography",className:""},"icons")," and ",l.createElement(o.N_,{to:"/foundations-and-styles/typography",className:""},"typography")," guidelines."),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "}

1,"Text and icons can also display status information, which is covered in the ",l.createElement(o.N_,{to:"#status-and-state-colors",className:""},"status and state colors section.")),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{label:"Regular text",color:"--pf-t--global--text--color--regular"},"Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use --global--icon--color--regular."),l.createElement(z,{label:"Subtle text",color:"--pf-t--global--text--color--subtle"},"Use as a secondary text color for text in an element that requires less emphasis, like descriptions or inactive tab labels."),l.createElement(z,{label:"Regular icons",color:"--pf-t--global--icon--color--regular"},"Use as the default color for icons in icon buttons and/or when paired with regular-colored text."),l.createElement(z,{label:"Links",color:"--pf-t--global--text--color--link--default"},"Use as the default text color for links."))),l.createElement(p.E,{span:7},l.createElement("img",{src:s,width:s.width||void 0,height:s.height||void 0,alt:"PatternFly text and icon colors",className:"ws-img "}))),l.createElement(o.x5,{id:"status-and-state-colors",headingLevel:"h2",className:"ws-title ws-h2"},"Status and state colors"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Status and state colors are indicators that communicate data and actions to users through the UI. PatternFly's status colors cover default, danger, success, information, and warning statuses, as well as disabled states."),l.createElement(o.x5,{id:"danger",headingLevel:"h3",className:"ws-title ws-h3"},"Danger"),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{color:"--pf-t--global--icon--color--status--danger--default",label:"Default icons"},"Use as the default color for icons that convey danger, like in alerts or banners."),l.createElement(z,{color:"--pf-t--global--text--color--status--danger--default",label:"Default text"},"Use as the default color for text that communicates a danger status."),l.createElement(z,{color:"--pf-t--global--color--status--danger--hover",label:"Hover"},"Use as the hover color for any element that conveys a danger status."))),l.createElement(p.E,{span:7},l.createElement("img",{src:c,width:c.width||void 0,height:c.height||void 0,alt:"PatternFly danger colors",className:"ws-img "}))),l.createElement(o.x5,{id:"warning",headingLevel:"h3",className:"ws-title ws-h3"},"Warning"),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{color:"--pf-t--global--icon--color--status--warning--default",label:"Default icons"},"Use as the default color for icons that convey a warning status, like in alerts or banners."),l.createElement(z,{color:"--pf-t--global--text--color--status--warning--default",label:"Default text"},"Use as the default color for text that communicates a warning status."),l.createElement(z,{color:"--pf-t--global--color--status--warning--hover",label:"Hover"},"Use as the hover color for any element that conveys a warning status."))),l.createElement(p.E,{span:7},l.createElement("img",{src:i,width:i.width||void 0,height:i.height||void 0,alt:"PatternFly warning colors",className:"ws-img "}))),l.createElement(o.x5,{id:"disabled",headingLevel:"h3",className:"ws-title ws-h3"},"Disabled"),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{color:"--pf-t--global--icon--color--disabled",label:"Icons"},"Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text"),l.createElement(z,{color:"--pf-t--global--text--color--disabled",label:"Text"},"Use as the color of text on disabled elements, like disabled menu items."),l.createElement(z,{color:"--pf-t--global--background--color--disabled--default",label:"Backgrounds"},"Use as the background color for disabled components."))),l.createElement(p.E,{span:7},l.createElement("img",{src:d,width:d.width||void 0,height:d.height||void 0,alt:"PatternFly disabled colors",className:"ws-img "}))),l.createElement(o.x5,{id:"nonstatus-colors",headingLevel:"h2",className:"ws-title ws-h2"},"Nonstatus colors"),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{span:5},l.createElement(E.B,{hasGutter:!0},l.createElement(z,{color:"--pf-t--global--border--color--nonstatus--teal--default",label:"Borders"}

1,"Use as the default border color for any element that does not convey status and that you always want to be teal, like color-coded labels."),l.createElement(z,{color:"--pf-t--global--color--nonstatus--purple--default",label:"Backgrounds"},"Use as the default background color for any element that does not convey status and that you always will want to be purple, like color-coded labels and banners."),l.createElement(z,{color:"--pf-t--global--color--nonstatus--green--hover",label:"Hover"},"Use as the hover state color for any element that uses the nonstatus green background color."))),l.createElement(p.E,{span:7},l.createElement("img",{src:m,width:m.width||void 0,height:m.height||void 0,alt:"PatternFly nonstatus colors",className:"ws-img "}))),l.createElement(o.x5,{id:"contrast-ratios",headingLevel:"h2",className:"ws-title ws-h2"},"Contrast ratios"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},l.createElement(o.N_,{to:"/accessibility/overview#accessibility-standards",className:""},"Our accessibility standards")," are ",l.createElement(o.N_,{to:"https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2&currentsidebar=%23col_customize&levels=aaa",className:""},"level AA in the Web Content Accessibility Guidelines 2.2"),". To achieve level AA accessibility, your UI contrast ratios must be at or above 4.5:1 for normal text, 3:1 for large text, and 3:1 for graphics and other UI components. Additionally, on hover, link text color should have ample contrast from both the background color and the default state link color."),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"To check the contrast between background and text colors, use a ",l.createElement("a",{href:"https://color.a11y.com/?wc3",target:"_blank",className:"pf-m-link"},"WCAG AA-compliance tool.")),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Beyond our standard contrast ratio, we support a high contrast and a glass contrast mode, as documented in our ",l.createElement(o.N_,{to:"/foundations-and-styles/theming#contrast-modes",className:""},"theming guidelines"),"."),l.createElement(o.x5,{id:"color-families",headingLevel:"h2",className:"ws-title ws-h2"},"Color families"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},'Our color palettes are organized into "families" that contain different shades of the same hue. In the following families, you can expand each color to see related tokens.'),l.createElement(h.x,{hasGutter:!0},l.createElement(p.E,{xl2RowSpan:1,xl2:4,xl:6,xlRowSpan:2,sm:12},l.createElement(j,{title:"Gray family",family:"gray"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Blue family",family:"blue"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Green family",family:"green"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Teal family",family:"teal"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Purple family",family:"purple"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Yellow family",family:"yellow"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Orange family",family:"orange"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Red family",family:"red"})),l.createElement(p.E,{xl2:4,xl:6,sm:12},l.createElement(j,{title:"Red orange family",family:"red-orange"}))));q.displayName="FoundationsAndStylesColorsDesignGuidelinesDocs",q.pageData=W;let M=q}}]);