Color Helper Classes

TIP

Always make sure color combinations are CI compliant and that the contrast ratio is at least 4.5:1 for normal text and 3:1 for large text.

You can hover over the color swatches to see the text-color with a dark background and click on the swatches to copy the selected class name to your clipboard.

Primary Colors

• ✅ Use primary colors for primary interactions and clickable elements.
• ❌ Avoid using primary colors for text or backgrounds.

h-bg-color-primary-lightest

h-bg-color-primary-light

h-bg-color-primary

h-bg-color-primary

text

h-color-primary-lightest

text

h-color-primary-light

text

h-color-primary

text

h-color-primary

Secondary Colors

• ✅ Use secondary colors for secondary interactions and clickable elements.

h-bg-color-secondary-lightest

h-bg-color-secondary-light

h-bg-color-secondary

h-bg-color-secondary

text

h-color-secondary-lightest

text

h-color-secondary-light

text

h-color-secondary

text

h-color-secondary

Neutral Colors

Neutral colors are typically used for text and subtle backgrounds.

• ✅ Use neutral colors for text and backgrounds.
• ✅ Neutral tones can also convey states (e.g. active, disabled).

h-bg-color-white

h-bg-color-lightest-gray

h-bg-color-light-gray

h-bg-color-gray

h-bg-color-dark-gray

h-bg-color-black

text

h-color-white

text

h-color-lightest-gray

text

h-color-light-gray

text

h-color-gray

text

h-color-dark-gray

text

h-color-black

State Colors

Success Color / Validation indicator

• ✅ Use success colors for positive feedback and success messages.

h-bg-color-success-lighter

h-bg-color-success-light

h-bg-color-success

h-bg-color-success-dark

text

h-color-success-lighter

text

h-color-success-light

text

h-color-success

text

h-color-success-dark

Warning Color / Warning indicator

• ✅ Use warning colors for warning messages and alerts.

h-bg-color-warning-lighter

h-bg-color-warning-light

h-bg-color-warning

h-bg-color-warning-dark

text

h-color-warning-lighter

text

h-color-warning-light

text

h-color-warning

text

h-color-warning-dark

Error Color / Error indicator

• ✅ Use error colors for error messages and alerts.

h-bg-color-error-lighter

h-bg-color-error-light

h-bg-color-error

h-bg-color-error-dark

text

h-color-error-lighter

text

h-color-error-light

text

h-color-error

text

h-color-error-dark

pharma4u product colors

h-bg-color-aporevision

h-bg-color-apothecary

h-bg-color-pta

h-bg-color-phip

h-bg-color-student

h-bg-color-webinar

h-bg-color-forum

h-bg-color-labor

h-bg-color-medicheck

h-bg-color-taxikon

text

h-color-aporevision

text

h-color-apothecary

text

h-color-pta

text

h-color-phip

text

h-color-student

text

h-color-webinar

text

h-color-forum

text

h-color-labor

text

h-color-medicheck

text

h-color-taxikon