Utilities - Colors

Color Utilities

Convey meaning through color with a handful of color utility classes.

Rock includes an expertly-crafted default color palette, inspired by Tailwind CSS, that is a great starting point if you don’t have your own specific branding in mind.

*Class is only available in v. 19.0

bg-primary
bg-primary-tint*
bg-primary-shade*
bg-success
bg-success-soft*
bg-success-tint*
bg-success-strong*
bg-success-shade*
bg-info
bg-info-soft*
bg-info-tint*
bg-info-strong*
bg-info-shade*
bg-warning
bg-warning-soft*
bg-warning-tint*
bg-warning-strong*
bg-warning-shade*
bg-danger
bg-danger-soft*
bg-danger-tint*
bg-danger-strong*
bg-danger-shade*
bg-critical
bg-critical-soft*
bg-critical-tint*
bg-critical-strong*
bg-critical-shade*
bg-interface-strongest*
bg-interface-stronger*
bg-interface-strongt*
bg-interface-medium*
bg-interface-soft*
bg-interface-softer*
bg-interface-softest*
bg-secondary*
bg-secondary-tint*
bg-secondary-shade*
bg-link*
bg-link-tint*
bg-link-shade*
bg-transparent
bg-current
bg-black
bg-white
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
bg-indigo-100
bg-indigo-200
bg-indigo-300
bg-indigo-400
bg-indigo-500
bg-indigo-600
bg-indigo-700
bg-indigo-800
bg-indigo-900
bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
text-primary
text-primary-tint*
text-primary-shade*
text-success
text-success-soft*
text-success-tint*
text-success-strong*
text-success-shade*
text-info
text-info-soft*
text-info-tint*
text-info-strong*
text-info-shade*
text-warning
text-warning-soft*
text-warning-tint*
text-warning-strong*
text-warning-shade*
text-danger
text-danger-soft*
text-danger-tint*
text-danger-strong*
text-danger-shade*
text-critical
text-critical-soft*
text-critical-tint*
text-critical-strong*
text-critical-shade*
text-interface-strongest*
text-interface-stronger*
text-interface-strongt*
text-interface-medium*
text-interface-soft*
text-interface-softer*
text-interface-softest*
text-secondary*
text-secondary-tint*
text-secondary-shade*
text-link*
text-link-tint*
text-link-shade*
text-transparent
text-current
text-black
text-white
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800
text-gray-900
text-red-100
text-red-200
text-red-300
text-red-400
text-red-500
text-red-600
text-red-700
text-red-800
text-red-900
text-orange-100
text-orange-200
text-orange-300
text-orange-400
text-orange-500
text-orange-600
text-orange-700
text-orange-800
text-orange-900
text-yellow-100
text-yellow-200
text-yellow-300
text-yellow-400
text-yellow-500
text-yellow-600
text-yellow-700
text-yellow-800
text-yellow-900
text-green-100
text-green-200
text-green-300
text-green-400
text-green-500
text-green-600
text-green-700
text-green-800
text-green-900
text-teal-100
text-teal-200
text-teal-300
text-teal-400
text-teal-500
text-teal-600
text-teal-700
text-teal-800
text-teal-900
text-blue-100
text-blue-200
text-blue-300
text-blue-400
text-blue-500
text-blue-600
text-blue-700
text-blue-800
text-blue-900
text-indigo-100
text-indigo-200
text-indigo-300
text-indigo-400
text-indigo-500
text-indigo-600
text-indigo-700
text-indigo-800
text-indigo-900
text-purple-100
text-purple-200
text-purple-300
text-purple-400
text-purple-500
text-purple-600
text-purple-700
text-purple-800
text-purple-900
text-pink-100
text-pink-200
text-pink-300
text-pink-400
text-pink-500
text-pink-600
text-pink-700
text-pink-800
text-pink-900
border-primary
border-success
border-info
border-warning
border-danger
border-critical
border-transparent
border-black
border-white
border-gray-100
border-gray-200
border-gray-300
border-gray-400
border-gray-500
border-gray-600
border-gray-700
border-gray-800
border-gray-900
border-red-100
border-red-200
border-red-300
border-red-400
border-red-500
border-red-600
border-red-700
border-red-800
border-red-900
border-orange-100
border-orange-200
border-orange-300
border-orange-400
border-orange-500
border-orange-600
border-orange-700
border-orange-800
border-orange-900
border-yellow-100
border-yellow-200
border-yellow-300
border-yellow-400
border-yellow-500
border-yellow-600
border-yellow-700
border-yellow-800
border-yellow-900
border-green-100
border-green-200
border-green-300
border-green-400
border-green-500
border-green-600
border-green-700
border-green-800
border-green-900
border-teal-100
border-teal-200
border-teal-300
border-teal-400
border-teal-500
border-teal-600
border-teal-700
border-teal-800
border-teal-900
border-blue-100
border-blue-200
border-blue-300
border-blue-400
border-blue-500
border-blue-600
border-blue-700
border-blue-800
border-blue-900
border-indigo-100
border-indigo-200
border-indigo-300
border-indigo-400
border-indigo-500
border-indigo-600
border-indigo-700
border-indigo-800
border-indigo-900
border-purple-100
border-purple-200
border-purple-300
border-purple-400
border-purple-500
border-purple-600
border-purple-700
border-purple-800
border-purple-900
border-pink-100
border-pink-200
border-pink-300
border-pink-400
border-pink-500
border-pink-600
border-pink-700
border-pink-800
border-pink-900