Accessible colors reference
Use this reference to select WCAG-compliant colors for widgets, tabs, and Area backgrounds in Freedom UI. The Color parameter in the Freedom UI Designer and Dashboard Designer already shows these colors. This reference also lists predefined colors for progress bars.
Widget colors
These colors apply to the Color parameter of widgets in solid (non-glass) style. The same colors are available across all Style values: "Fully colored," "Partially colored," "Plain white," and "Transparent."
Color name | HEX color code |
|---|---|
Blue | #0058EF |
Burnt coral | #BE1B5A |
Dark turquoise | #08857E |
Steel blue | #1566B9 |
Vivid purple | #9641A9 |
Cadmium red | #E00022 |
Forest green | #0B6A32 |
Violet | #7848EE |
Navy blue | #4F43C2 |
Dark blue | #0D2E4E |
Avoid these colors on white backgrounds — they do not meet WCAG contrast requirements. | |
Orange-red | #FF8800 |
Orange | #FFAC07 |
Light green | #A6DE00 |
Turquoise | #00BFA5 |
Rusty orange | #F86700 |
Green | #20A959 |
Light blue | #009DE3 |
Celestial blue | #247EE5 |
Bright red | #FF602E |
Dark green | #22AC14 |
Red | #FF4013 |
Coral | #F9307F |
Purple | #B87CCF |
Multi-series color order
For bars (including stacked bars), lines, and stacked areas with multiple series, apply colors in the following order:
Color name | HEX color code |
|---|---|
Blue | #0058EF |
Burnt coral | #BE1B5A |
Dark turquoise | #08857E |
Rusty orange | #F86700 |
Light blue | #009DE3 |
Purple | #B87CCF |
Pipeline, Sales pipeline, Full pipeline, and Doughnut widgets use preset color sequences based on the number of values or stages. These colors are not user-configurable and are already WCAG-compliant.
Glass effect
These colors apply to widgets that use the glassmorphism style. The "80" suffix in each HEX code indicates the 50% opacity used by the glass effect.
Color name | HEX color code |
|---|---|
Blue | #0058EF80 |
Burnt coral | #BE1B5A80 |
Dark turquoise | #08857E80 |
Steel blue | #1566B980 |
Vivid purple | #9641A980 |
Cadmium red | #E0002280 |
Forest green | #0B6A3280 |
Rusty orange | #F8670080 |
Green | #20A95980 |
Light blue | #009DE380 |
Celestial blue | #247EE580 |
Bright red | #FF602E80 |
Dark green | #22AC1480 |
Red | #FF401380 |
Coral | #F9307F80 |
Purple | #B87CCF80 |
Navy blue | #4F43C280 |
Dark blue | #0D2E4E80 |
Violet | #7848EE80 |
Avoid these colors on white backgrounds at 50% opacity because they do not meet WCAG contrast requirements. | |
Orange-red | #FF880080 |
Orange | #FFAC0780 |
Light green | #A6DE0080 |
Turquoise | #00BFA580 |
Transparent | Transparent |
Do not use Dark blue #0D2E4E80 for line and gauge charts in glass style.
Tab and title colors
Configure tab colors in the Appearance block of the Tabs layout element. The block includes Tab panel colors (Body, Tab underline) and Tab title color (Selected, Unselected). Available styles: "Fully colored," "Partially colored," and "Plain white." For standard and small text on tabs, the minimum contrast ratio is 4.5:1. Validate custom combinations with Contrast Checker.
Color name | HEX color code |
|---|---|
Blue | #0058EF |
Burnt coral | #BE1B5A |
Dark turquoise | #08857E |
Steel blue | #1566B9 |
Vivid purple | #9641A9 |
Cadmium red | #E00022 |
Forest green | #0B6A32 |
Violet | #7848EE |
Navy blue | #4F43C2 |
Dark blue | #0D2E4E |
Black | #000000 |
Gray | #757575 |
Green | #098401 |
Red | #D2310D |
Dark navy | #0C2E4D |
Bright red | #FD3F11 |
Orange | #FD6534 |
Teal | #009587 |
Hot pink | #F92F7E |
Indigo | #4F43C1 |
Royal blue | #0057EE |
Cerulean | #0090E9 |
Dark orange | #FD8701 |
Amber | #FDAB06 |
Lime | #A5DD01 |
Emerald | #00C753 |
Bright green | #21AB13 |
Turquoise | #00BEA4 |
Lavender | #B77CCE |
Sky blue | #03A8F4 |
White | #FFFFFF |
Light coral | #FDD8CF |
Light peach | #FDDFD5 |
Light apricot | #FDE6CB |
Light cream | #FDEDCC |
Light lime | #EDF8CB |
Light mint | #CBF4DB |
Light sage | #D1EDCF |
Light aqua | #CBF1EC |
Light teal | #CBE9E6 |
Light pink | #FDD5E4 |
Light lavender | #F0E4F4 |
Light violet | #E3D9FC |
Light periwinkle | #DBD8F2 |
Light blue | #CBDDFC |
Light sky | #CCEDFC |
Light cerulean | #CBE8FA |
Progress bar colors
The Progress bar component uses predefined colors that are not user-configurable. Darker colors improve stage readability.
Color name | HEX color code |
|---|---|
Gray | #757575 |
Blue | #0058EF |
Green | #0B8500 |
Red | #B61303 |
Avoid light colors for progress bars because they reduce stage readability. | |
Light yellow | #F9D68D |
Light turquoise | #D3F1ED |
Area background colors
Configure background colors using the Color parameter of the Area layout element. The parameter offers a full RGB range with default presets listed below. The same colors apply to Column and Flex layout elements. If the background is behind text or chart values, prefer white and darker colors.
Color name | HEX color code |
|---|---|
White | #FFFFFF |
Steel blue | #1566B9 |
Cadmium red | #E00022 |
Dark turquoise | #08857E |
Avoid these colors for Area backgrounds behind text or chart values because they do not provide sufficient contrast. | |
Orange | #FFAC07 |
Orange-red | #FF8800 |
Light green | #A6DE00 |
Turquoise | #00BFA5 |
Black | #000000 |
Gray | #757575 |
Blue | #004FD5 |
Green | #098401 |
Red | #D2310D |
Dark navy | #0C2E4D |
Bright red | #FD3F11 |
Teal | #009587 |
Hot pink | #F92F7E |
Violet | #7848ED |
Indigo | #4F43C1 |
Royal blue | #0057EE |
Cerulean | #0090E9 |
Dark orange | #FD8701 |
Amber | #FDAB06 |
Lime | #A5DD01 |
Emerald | #00C753 |
Bright green | #21AB13 |
Lavender | #B77CCE |
Sky blue | #03A8F4 |
Light coral | #FDD8CF |
Light peach | #FDDFD5 |
Light apricot | #FDE6CB |
Light cream | #FDEDCC |
Light lime | #EDF8CB |
Light mint | #CBF4DB |
Light sage | #D1EDCF |
Light aqua | #CBF1EC |
Light teal | #CBE9E6 |
Light pink | #FDD5E4 |
Light lavender | #F0E4F4 |
Light violet | #E3D9FC |
Light periwinkle | #DBD8F2 |
Light blue | #CBDDFC |
Light sky | #CCEDFC |
Light cerulean | #CBE8FA |
See also
Ensure color accessibility in Freedom UI