Elements logo

Ring color

Utilities for setting the color of outline rings.

Class reference

ClassProperties
ring-current--tw-ring-color: currentColor;
 
ring-transparent--tw-ring-color: transparent;
 
ring-black--tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
 
ring-white--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
 
ring-gray-0--tw-ring-color: rgba(248, 248, 250, var(--tw-ring-opacity));
 
ring-gray-100--tw-ring-color: rgba(242, 241, 246, var(--tw-ring-opacity));
 
ring-gray-200--tw-ring-color: rgba(229, 228, 233, var(--tw-ring-opacity));
 
ring-gray-300--tw-ring-color: rgba(204, 203, 209, var(--tw-ring-opacity));
 
ring-gray-400--tw-ring-color: rgba(169, 168, 175, var(--tw-ring-opacity));
 
ring-gray-500--tw-ring-color: rgba(119, 118, 127, var(--tw-ring-opacity));
 
ring-gray-600--tw-ring-color: rgba(85, 84, 93, var(--tw-ring-opacity));
 
ring-gray-700--tw-ring-color: rgba(53, 52, 60, var(--tw-ring-opacity));
 
ring-gray-800--tw-ring-color: rgba(34, 33, 40, var(--tw-ring-opacity));
 
ring-gray-900--tw-ring-color: rgba(15, 13, 22, var(--tw-ring-opacity));
 
ring-gray--tw-ring-color: rgba(229, 228, 233, var(--tw-ring-opacity));
 
ring-violet-0--tw-ring-color: rgba(248, 245, 255, var(--tw-ring-opacity));
 
ring-violet-100--tw-ring-color: rgba(237, 224, 254, var(--tw-ring-opacity));
 
ring-violet-200--tw-ring-color: rgba(215, 188, 253, var(--tw-ring-opacity));
 
ring-violet-300--tw-ring-color: rgba(180, 130, 250, var(--tw-ring-opacity));
 
ring-violet-400--tw-ring-color: rgba(149, 83, 248, var(--tw-ring-opacity));
 
ring-violet-500--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-violet-600--tw-ring-color: rgba(89, 0, 190, var(--tw-ring-opacity));
 
ring-violet-700--tw-ring-color: rgba(68, 0, 135, var(--tw-ring-opacity));
 
ring-violet-800--tw-ring-color: rgba(52, 0, 96, var(--tw-ring-opacity));
 
ring-violet-900--tw-ring-color: rgba(30, 0, 51, var(--tw-ring-opacity));
 
ring-violet--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-magenta-0--tw-ring-color: rgba(251, 245, 255, var(--tw-ring-opacity));
 
ring-magenta-100--tw-ring-color: rgba(245, 222, 254, var(--tw-ring-opacity));
 
ring-magenta-200--tw-ring-color: rgba(238, 188, 252, var(--tw-ring-opacity));
 
ring-magenta-300--tw-ring-color: rgba(225, 129, 243, var(--tw-ring-opacity));
 
ring-magenta-400--tw-ring-color: rgba(200, 70, 224, var(--tw-ring-opacity));
 
ring-magenta-500--tw-ring-color: rgba(191, 4, 220, var(--tw-ring-opacity));
 
ring-magenta-600--tw-ring-color: rgba(163, 0, 168, var(--tw-ring-opacity));
 
ring-magenta-700--tw-ring-color: rgba(146, 0, 138, var(--tw-ring-opacity));
 
ring-magenta-800--tw-ring-color: rgba(122, 3, 115, var(--tw-ring-opacity));
 
ring-magenta-900--tw-ring-color: rgba(52, 0, 43, var(--tw-ring-opacity));
 
ring-magenta--tw-ring-color: rgba(191, 4, 220, var(--tw-ring-opacity));
 
ring-blue-0--tw-ring-color: rgba(229, 250, 255, var(--tw-ring-opacity));
 
ring-blue-100--tw-ring-color: rgba(198, 236, 252, var(--tw-ring-opacity));
 
ring-blue-200--tw-ring-color: rgba(163, 211, 251, var(--tw-ring-opacity));
 
ring-blue-300--tw-ring-color: rgba(118, 170, 239, var(--tw-ring-opacity));
 
ring-blue-400--tw-ring-color: rgba(75, 122, 217, var(--tw-ring-opacity));
 
ring-blue-500--tw-ring-color: rgba(33, 87, 206, var(--tw-ring-opacity));
 
ring-blue-600--tw-ring-color: rgba(31, 62, 170, var(--tw-ring-opacity));
 
ring-blue-700--tw-ring-color: rgba(13, 34, 126, var(--tw-ring-opacity));
 
ring-blue-800--tw-ring-color: rgba(1, 20, 94, var(--tw-ring-opacity));
 
ring-blue-900--tw-ring-color: rgba(0, 6, 47, var(--tw-ring-opacity));
 
ring-blue--tw-ring-color: rgba(118, 170, 239, var(--tw-ring-opacity));
 
ring-teal-0--tw-ring-color: rgba(214, 255, 245, var(--tw-ring-opacity));
 
ring-teal-100--tw-ring-color: rgba(181, 246, 233, var(--tw-ring-opacity));
 
ring-teal-200--tw-ring-color: rgba(118, 228, 215, var(--tw-ring-opacity));
 
ring-teal-300--tw-ring-color: rgba(60, 203, 197, var(--tw-ring-opacity));
 
ring-teal-400--tw-ring-color: rgba(42, 161, 164, var(--tw-ring-opacity));
 
ring-teal-500--tw-ring-color: rgba(20, 127, 135, var(--tw-ring-opacity));
 
ring-teal-600--tw-ring-color: rgba(3, 104, 115, var(--tw-ring-opacity));
 
ring-teal-700--tw-ring-color: rgba(3, 65, 79, var(--tw-ring-opacity));
 
ring-teal-800--tw-ring-color: rgba(1, 44, 52, var(--tw-ring-opacity));
 
ring-teal-900--tw-ring-color: rgba(0, 24, 30, var(--tw-ring-opacity));
 
ring-teal--tw-ring-color: rgba(60, 203, 197, var(--tw-ring-opacity));
 
ring-green-0--tw-ring-color: rgba(235, 255, 231, var(--tw-ring-opacity));
 
ring-green-100--tw-ring-color: rgba(207, 248, 199, var(--tw-ring-opacity));
 
ring-green-200--tw-ring-color: rgba(145, 234, 153, var(--tw-ring-opacity));
 
ring-green-300--tw-ring-color: rgba(64, 208, 102, var(--tw-ring-opacity));
 
ring-green-400--tw-ring-color: rgba(50, 168, 89, var(--tw-ring-opacity));
 
ring-green-500--tw-ring-color: rgba(20, 133, 64, var(--tw-ring-opacity));
 
ring-green-600--tw-ring-color: rgba(1, 110, 58, var(--tw-ring-opacity));
 
ring-green-700--tw-ring-color: rgba(6, 72, 38, var(--tw-ring-opacity));
 
ring-green-800--tw-ring-color: rgba(1, 44, 23, var(--tw-ring-opacity));
 
ring-green-900--tw-ring-color: rgba(0, 26, 13, var(--tw-ring-opacity));
 
ring-green--tw-ring-color: rgba(64, 208, 102, var(--tw-ring-opacity));
 
ring-yellow-0--tw-ring-color: rgba(255, 250, 236, var(--tw-ring-opacity));
 
ring-yellow-100--tw-ring-color: rgba(249, 241, 201, var(--tw-ring-opacity));
 
ring-yellow-200--tw-ring-color: rgba(237, 231, 142, var(--tw-ring-opacity));
 
ring-yellow-300--tw-ring-color: rgba(212, 205, 82, var(--tw-ring-opacity));
 
ring-yellow-400--tw-ring-color: rgba(176, 170, 49, var(--tw-ring-opacity));
 
ring-yellow-500--tw-ring-color: rgba(126, 127, 27, var(--tw-ring-opacity));
 
ring-yellow-600--tw-ring-color: rgba(99, 100, 8, var(--tw-ring-opacity));
 
ring-yellow-700--tw-ring-color: rgba(66, 64, 6, var(--tw-ring-opacity));
 
ring-yellow-800--tw-ring-color: rgba(42, 38, 1, var(--tw-ring-opacity));
 
ring-yellow-900--tw-ring-color: rgba(25, 23, 0, var(--tw-ring-opacity));
 
ring-yellow--tw-ring-color: rgba(212, 205, 82, var(--tw-ring-opacity));
 
ring-orange-0--tw-ring-color: rgba(255, 245, 241, var(--tw-ring-opacity));
 
ring-orange-100--tw-ring-color: rgba(254, 219, 206, var(--tw-ring-opacity));
 
ring-orange-200--tw-ring-color: rgba(255, 196, 164, var(--tw-ring-opacity));
 
ring-orange-300--tw-ring-color: rgba(242, 153, 91, var(--tw-ring-opacity));
 
ring-orange-400--tw-ring-color: rgba(223, 122, 48, var(--tw-ring-opacity));
 
ring-orange-500--tw-ring-color: rgba(180, 95, 25, var(--tw-ring-opacity));
 
ring-orange-600--tw-ring-color: rgba(144, 72, 8, var(--tw-ring-opacity));
 
ring-orange-700--tw-ring-color: rgba(99, 50, 3, var(--tw-ring-opacity));
 
ring-orange-800--tw-ring-color: rgba(68, 33, 0, var(--tw-ring-opacity));
 
ring-orange-900--tw-ring-color: rgba(45, 17, 0, var(--tw-ring-opacity));
 
ring-orange--tw-ring-color: rgba(242, 153, 91, var(--tw-ring-opacity));
 
ring-red-0--tw-ring-color: rgba(255, 244, 244, var(--tw-ring-opacity));
 
ring-red-100--tw-ring-color: rgba(253, 194, 196, var(--tw-ring-opacity));
 
ring-red-200--tw-ring-color: rgba(253, 176, 177, var(--tw-ring-opacity));
 
ring-red-300--tw-ring-color: rgba(250, 115, 112, var(--tw-ring-opacity));
 
ring-red-400--tw-ring-color: rgba(224, 69, 66, var(--tw-ring-opacity));
 
ring-red-500--tw-ring-color: rgba(192, 44, 33, var(--tw-ring-opacity));
 
ring-red-600--tw-ring-color: rgba(164, 28, 30, var(--tw-ring-opacity));
 
ring-red-700--tw-ring-color: rgba(123, 10, 12, var(--tw-ring-opacity));
 
ring-red-800--tw-ring-color: rgba(87, 3, 5, var(--tw-ring-opacity));
 
ring-red-900--tw-ring-color: rgba(58, 1, 2, var(--tw-ring-opacity));
 
ring-red--tw-ring-color: rgba(250, 115, 112, var(--tw-ring-opacity));
 
ring-pink-0--tw-ring-color: rgba(255, 243, 255, var(--tw-ring-opacity));
 
ring-pink-100--tw-ring-color: rgba(254, 221, 250, var(--tw-ring-opacity));
 
ring-pink-200--tw-ring-color: rgba(253, 177, 231, var(--tw-ring-opacity));
 
ring-pink-300--tw-ring-color: rgba(243, 115, 192, var(--tw-ring-opacity));
 
ring-pink-400--tw-ring-color: rgba(229, 67, 153, var(--tw-ring-opacity));
 
ring-pink-500--tw-ring-color: rgba(190, 39, 109, var(--tw-ring-opacity));
 
ring-pink-600--tw-ring-color: rgba(165, 23, 80, var(--tw-ring-opacity));
 
ring-pink-700--tw-ring-color: rgba(116, 8, 48, var(--tw-ring-opacity));
 
ring-pink-800--tw-ring-color: rgba(85, 2, 32, var(--tw-ring-opacity));
 
ring-pink-900--tw-ring-color: rgba(61, 1, 21, var(--tw-ring-opacity));
 
ring-pink--tw-ring-color: rgba(243, 115, 192, var(--tw-ring-opacity));
 
ring-light--tw-ring-color: rgba(248, 248, 250, var(--tw-ring-opacity));
 
ring-dark--tw-ring-color: rgba(53, 52, 60, var(--tw-ring-opacity));
 
ring-primary--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-primary-light--tw-ring-color: rgba(149, 83, 248, var(--tw-ring-opacity));
 
ring-primary-dark--tw-ring-color: rgba(89, 0, 190, var(--tw-ring-opacity));
 
ring-secondary--tw-ring-color: rgba(30, 0, 51, var(--tw-ring-opacity));
 
ring-secondary-light--tw-ring-color: rgba(68, 0, 135, var(--tw-ring-opacity));
 
ring-secondary-dark--tw-ring-color: rgba(52, 0, 96, var(--tw-ring-opacity));
 
ring-info--tw-ring-color: rgba(118, 170, 239, var(--tw-ring-opacity));
 
ring-info-light--tw-ring-color: rgba(163, 211, 251, var(--tw-ring-opacity));
 
ring-info-dark--tw-ring-color: rgba(75, 122, 217, var(--tw-ring-opacity));
 
ring-success--tw-ring-color: rgba(64, 208, 102, var(--tw-ring-opacity));
 
ring-success-light--tw-ring-color: rgba(145, 234, 153, var(--tw-ring-opacity));
 
ring-success-dark--tw-ring-color: rgba(50, 168, 89, var(--tw-ring-opacity));
 
ring-warning--tw-ring-color: rgba(212, 205, 82, var(--tw-ring-opacity));
 
ring-warning-light--tw-ring-color: rgba(237, 231, 142, var(--tw-ring-opacity));
 
ring-warning-dark--tw-ring-color: rgba(176, 170, 49, var(--tw-ring-opacity));
 
ring-danger--tw-ring-color: rgba(250, 115, 112, var(--tw-ring-opacity));
 
ring-danger-light--tw-ring-color: rgba(253, 176, 177, var(--tw-ring-opacity));
 
ring-danger-dark--tw-ring-color: rgba(224, 69, 66, var(--tw-ring-opacity));
 
ring-brand-primary--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-brand-accent--tw-ring-color: rgba(191, 4, 220, var(--tw-ring-opacity));
 
ring-brand-secondary--tw-ring-color: rgba(30, 0, 51, var(--tw-ring-opacity));
 
ring-brand-dark--tw-ring-color: rgba(53, 52, 60, var(--tw-ring-opacity));
 

Usage

Use the ring-{color} utilities to set the color of an outline ring.

<button class="... ring-4 ring-teal-100">
  Button
</button>

Changing opacity

You can control the opacity of rings using the ring-opacity-{amount} utilities:

<button class="... ring-4 ring-yellow-500 ring-opacity-25 bg-yellow-0">
  Button
</button>

For more information, see the Ring Opacity documentation.

Responsive

To control the ring color at a specific breakpoint, add a {screen}: prefix to any existing ring color utility. For example, use md:ring-blue-500 to apply the ring-blue-500 utility at only medium screen sizes and above.

<button class="ring-2 ring-blue md:ring-blue-500">
  <!-- ... -->
</button>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.