This is a lightweight (and low level) CSS utilities library aimed at simplifying and standardizing common CSS patterns. It provides a utility function for generating CSS properties and values dynamically.

Installation

This library is implemented in both TypeScript and PHP. You can install the TypeScript version via npm:

npm install @lnear/marco

and the PHP version via composer:

composer require lnear/marco

Usage

import { replace } from "@lnear/marco";
console.log(
  `div { ${replace(
    "transition-colors",
    "transition-none",
    "blur-md",
    "drop-shadow-xl"
  )} }`
);

use Lnear\Marco\Marco;
$m = Marco::macro(
  'transition-colors',
  'transition-none',
  'blur-md',
  'drop-shadow-xl'
);
echo "div { $m }";

This will generate the following CSS string:

div {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-property: none;
  filter: blur(12px);
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(
      0 8px 5px rgb(0 0 0 / 0.08)
    );
}

You can also use the generateCSS function to generate CSS strings for web components (or any other scoped style engine that supports :host ) with multiple macros:

import { generateCSS } from "@lnear/marco";
console.log(
  generateCSS({
    sm: "div { color: red; }",
    md: "div { color: green; }",
    lg: "div { color: blue; }",
    xl: "div { color: yellow; }",
    xl2: "div { color: pink; }",
    dark: "div { color: black; }",
    light: "div { color: white; }",
    macros: "sm:md:lg:xl:xl2:dark:bg-red-500",
  })
);

or the generate method of the Marco class in PHP:

use Lnear\Marco\Marco;
echo Marco::generate(
  sm: 'div { color: red; }',
  md: 'div { color: green; }',
  lg: 'div { color: blue; }',
  xl: 'div { color: yellow; }',
  xl2: 'div { color: pink; }',
  dark: 'div { color: black; }',
  light: 'div { color: white; }',
  macros: 'sm:md:lg:xl:xl2:dark:bg-red-500',
);

Both will generate the following CSS string:

:host {
  @media (min-width: 640px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 768px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 1024px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 1280px) {
    background-color: rgb(239 68 68);
  }
  @media (min-width: 1536px) {
    background-color: rgb(239 68 68);
  }
  @media (prefers-color-scheme: dark) {
    background-color: rgb(239 68 68);
  }
}
@media (min-width: 640px) {
  div {
    color: red;
  }
}
@media (min-width: 768px) {
  div {
    color: green;
  }
}
@media (min-width: 1024px) {
  div {
    color: blue;
  }
}
@media (min-width: 1280px) {
  div {
    color: yellow;
  }
}
@media (min-width: 1536px) {
  div {
    color: pink;
  }
}
@media (prefers-color-scheme: dark) {
  div {
    color: black;
  }
}
@media (prefers-color-scheme: light) {
  div {
    color: white;
  }
}

More docs coming soon…

Patterns

The below are the predefined patterns that can be used with the replace function. It is not an exhaustive list and intutive patterns are implemented as needed. For example, only “saturate-(0, 50, 100, 150, 200)” are documented here, but any value can be used with the “saturate” pattern. (saturate-x where x is a number will be replaced with “filter: saturate({x / 100});“)

View Patterns

drop-shadow

filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));

drop-shadow-sm

filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));

drop-shadow-md

filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

drop-shadow-lg

filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));

drop-shadow-xl

filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));

drop-shadow-xl2

filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));

drop-shadow-none

filter: drop-shadow(0 0 #0000);

backdrop-hue-rotate-0

backdrop-filter: hue-rotate(0deg);

backdrop-hue-rotate-15

backdrop-filter: hue-rotate(15deg);

backdrop-hue-rotate-16

backdrop-filter: hue-rotate(16deg);

backdrop-hue-rotate-30

backdrop-filter: hue-rotate(30deg);

backdrop-hue-rotate-60

backdrop-filter: hue-rotate(60deg);

backdrop-hue-rotate-90

backdrop-filter: hue-rotate(90deg);

backdrop-hue-rotate-180

backdrop-filter: hue-rotate(180deg);

hue-rotate-0

filter: hue-rotate(0deg);

hue-rotate-15

filter: hue-rotate(15deg);

hue-rotate-30

filter: hue-rotate(30deg);

hue-rotate-60

filter: hue-rotate(60deg);

hue-rotate-90

filter: hue-rotate(90deg);

hue-rotate-180

filter: hue-rotate(180deg);

grayscale-0

filter: grayscale(0);

grayscale

filter: grayscale(100%);

invert-0

filter: invert(0);

invert

filter: invert(100%);

sepia-0

filter: sepia(0);

sepia

filter: sepia(100%);

backdrop-grayscale-0

backdrop-filter: grayscale(0);

backdrop-grayscale

backdrop-filter: grayscale(100%);

saturate-0

filter: saturate(0);

saturate-50

filter: saturate(0.5);

saturate-100

filter: saturate(1);

saturate-150

filter: saturate(1.5);

saturate-200

filter: saturate(2);

backdrop-blur

backdrop-filter: blur(8px);

backdrop-blur-none

backdrop-filter: blur(0);

backdrop-blur-sm

backdrop-filter: blur(4px);

backdrop-blur-md

backdrop-filter: blur(12px);

backdrop-blur-lg

backdrop-filter: blur(16px);

backdrop-blur-xl

backdrop-filter: blur(24px);

backdrop-blur-xl2

backdrop-filter: blur(40px);

backdrop-blur-xl3

backdrop-filter: blur(64px);

blur

filter: blur(8px);

blur-none

filter: blur(0);

blur-sm

filter: blur(4px);

blur-md

filter: blur(12px);

blur-lg

filter: blur(16px);

blur-xl

filter: blur(24px);

blur-xl2

filter: blur(40px);

blur-xl3

filter: blur(64px);

backdrop-brightness-0

backdrop-filter: brightness(0);

backdrop-brightness-50

backdrop-filter: brightness(0.5);

backdrop-brightness-75

backdrop-filter: brightness(0.75);

backdrop-brightness-90

backdrop-filter: brightness(0.9);

backdrop-brightness-95

backdrop-filter: brightness(0.95);

backdrop-brightness-100

backdrop-filter: brightness(1);

backdrop-brightness-105

backdrop-filter: brightness(1.05);

backdrop-brightness-110

backdrop-filter: brightness(1.1);

backdrop-brightness-125

backdrop-filter: brightness(1.25);

backdrop-brightness-150

backdrop-filter: brightness(1.5);

backdrop-brightness-200

backdrop-filter: brightness(2);

brightness-0

filter: brightness(0);

brightness-50

filter: brightness(0.5);

brightness-75

filter: brightness(0.75);

brightness-90

filter: brightness(0.9);

brightness-95

filter: brightness(0.95);

brightness-100

filter: brightness(1);

brightness-105

filter: brightness(1.05);

brightness-110

filter: brightness(1.1);

brightness-125

filter: brightness(1.25);

brightness-150

filter: brightness(1.5);

brightness-200

filter: brightness(2);

contrast-0

filter: contrast(0);

contrast-50

filter: contrast(0.5);

contrast-75

filter: contrast(0.75);

contrast-100

filter: contrast(1);

contrast-125

filter: contrast(1.25);

contrast-150

filter: contrast(1.5);

contrast-200

filter: contrast(2);

backdrop-contrast-0

backdrop-filter: contrast(0);

backdrop-contrast-50

backdrop-filter: contrast(0.5);

backdrop-contrast-75

backdrop-filter: contrast(0.75);

backdrop-contrast-100

backdrop-filter: contrast(1);

backdrop-contrast-125

backdrop-filter: contrast(1.25);

backdrop-contrast-150

backdrop-filter: contrast(1.5);

backdrop-contrast-200

backdrop-filter: contrast(2);

ease-linear

transition-timing-function: linear;

ease-in

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

ease-out

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

ease-in-out

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

timing-linear

transition-timing-function: linear;

timing-in

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

timing-out

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

timing-in-out

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-colors

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-opacity

transition-property: opacity;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-all

transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-shadow

transition-property: shadow;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;

transition-none

transition-property: none;

float-start

float: start;

float-end

float: end;

float-right

float: right;

float-left

float: left;

float-none

float: none;

clear-start

clear: start;

clear-end

clear: end;

clear-right

clear: right;

clear-left

clear: left;

clear-both

clear: both;

clear-none

clear: none;

inline-block

display: inline-block;

inline-flex

display: inline-flex;

inline-table

display: inline-table;

block

display: block;

inline

display: inline;

hidden

display: none;

table

display: table;

table-caption

display: table-caption;

table-cell

display: table-cell;

table-column

display: table-column;

table-column-group

display: table-column-group;

table-footer-group

display: table-footer-group;

table-header-group

display: table-header-group;

table-row-group

display: table-row-group;

table-row

display: table-row;

flow-root

display: flow-root;

grid

display: grid;

inline-grid

display: inline-grid;

contents

display: contents;

list-item

display: list-item;

bg-inherit

background-color: inherit;

bg-transparent

background-color: transparent;

bg-auto

background-size: auto;

bg-cover

background-size: cover;

bg-contain

background-size: contain;

bg-fixed

background-attachment: fixed;

bg-local

background-attachment: local;

bg-scroll

background-attachment: scroll;

bg-center

background-position: center;

bg-top

background-position: top;

bg-right-top

background-position: right-top;

bg-right

background-position: right;

bg-right-bottom

background-position: right-bottom;

bg-bottom

background-position: bottom;

bg-left-bottom

background-position: left-bottom;

bg-left

background-position: left;

bg-left-top

background-position: left-top;

bg-repeat

background-repeat: repeat;

bg-no-repeat

background-repeat: no-repeat;

bg-repeat-x

background-repeat: repeat-x;

bg-repeat-y

background-repeat: repeat-y;

bg-round

background-repeat: round;

bg-space

background-repeat: space;

bg-none

background-image: none;

pointer-events-none

pointer-events: none;

pointer-events-auto

pointer-events: auto;

place-content-center

place-content: center;

place-content-start

place-content: start;

place-content-end

place-content: end;

place-content-between

place-content: between;

place-content-around

place-content: around;

place-content-evenly

place-content: evenly;

place-content-baseline

place-content: baseline;

place-content-stretch

place-content: stretch;

place-items-center

place-items: center;

place-items-start

place-items: start;

place-items-end

place-items: end;

place-items-baseline

place-items: baseline;

place-items-stretch

place-items: stretch;

inset-auto

inset: auto;

start-auto

inset-inline-start: auto;

end-auto

inset-inline-end: auto;

top-auto

top: auto;

right-auto

right: auto;

bottom-auto

bottom: auto;

left-auto

left: auto;

isolate

isolation: isolate;

isolation-auto

isolation: auto;

z-auto

z-index: auto;

order-first

order: calc(-infinity);

order-last

order: calc(infinity);

order-none

order: 0;

col-auto

grid-column: auto;

col-span-full

grid-column: 1 / -1;

col-start-auto

grid-column-start: auto;

col-end-auto

grid-column-end: auto;

row-auto

grid-row: auto;

row-span-full

grid-row: 1 / -1;

row-start-auto

grid-row-start: auto;

row-end-auto

grid-row-end: auto;

box-border

box-sizing: border-box;

box-content

box-sizing: content-box;

aspect-auto

aspect-ratio: auto;

aspect-square

aspect-ratio: 1 / 1;

aspect-video

aspect-ratio: 16 / 9;

flex-auto

flex: auto;

flex-initial

flex: 0 auto;

flex-none

flex: none;

basis-auto

flex-basis: auto;

basis-full

flex-basis: 100%;

table-auto

table-layout: auto;

table-fixed

table-layout: fixed;

caption-top

caption-side: top;

caption-bottom

caption-side: bottom;

border-collapse

border-collapse: collapse;

border-separate

border-collapse: separate;

origin-center

transform-origin: center;

origin-top

transform-origin: top;

origin-top-right

transform-origin: top right;

origin-right

transform-origin: right;

origin-bottom-right

transform-origin: bottom right;

origin-bottom

transform-origin: bottom;

origin-bottom-left

transform-origin: bottom left;

origin-left

transform-origin: left;

origin-top-left

transform-origin: top left;

perspective-origin-center

perspective-origin: center;

perspective-origin-top

perspective-origin: top;

perspective-origin-top-right

perspective-origin: top right;

perspective-origin-right

perspective-origin: right;

perspective-origin-bottom-right

perspective-origin: bottom right;

perspective-origin-bottom

perspective-origin: bottom;

perspective-origin-bottom-left

perspective-origin: bottom left;

perspective-origin-left

perspective-origin: left;

perspective-origin-top-left

perspective-origin: top left;

perspective-none

perspective: none;

translate-none

translate: none;

transform-none

transform: none;

transform-flat

transform-style: flat;

transform-3d

transform-style: preserve-3d;

transform-content

transform-box: content-box;

transform-border

transform-box: border-box;

transform-fill

transform-box: fill-box;

transform-stroke

transform-box: stroke-box;

transform-view

transform-box: view-box;

backface-visible

backface-visibility: visible;

backface-hidden

backface-visibility: hidden;

resize-none

resize: none;

resize-both

resize: both;

resize-x

resize: horizontal;

resize-y

resize: vertical;

snap-none

scroll-snap-type: none;

snap-align-none

scroll-snap-align: none;

snap-start

scroll-snap-align: start;

snap-end

scroll-snap-align: end;

snap-center

scroll-snap-align: center;

snap-normal

scroll-snap-stop: normal;

snap-always

scroll-snap-stop: always;

list-inside

list-style-position: inside;

list-outside

list-style-position: outside;

list-none

list-style-type: none;

list-disc

list-style-type: disc;

list-decimal

list-style-type: decimal;

list-image-none

list-style-image: none;

appearance-none

appearance: none;

appearance-auto

appearance: auto;

columns-auto

columns: auto;

grid-flow-row

grid-auto-flow: row;

grid-flow-col

grid-auto-flow: column;

grid-flow-dense

grid-auto-flow: dense;

grid-flow-row-dense

grid-auto-flow: row dense;

grid-flow-col-dense

grid-auto-flow: column dense;

auto-cols-auto

grid-auto-columns: auto;

auto-cols-min

grid-auto-columns: min-content;

auto-cols-max

grid-auto-columns: max-content;

auto-cols-fr

grid-auto-columns: minmax(0, 1fr);

auto-rows-auto

grid-auto-rows: auto;

auto-rows-min

grid-auto-rows: min-content;

auto-rows-max

grid-auto-rows: max-content;

auto-rows-fr

grid-auto-rows: minmax(0, 1fr);

grid-cols-none

grid-template-columns: none;

grid-cols-subgrid

grid-template-columns: subgrid;

grid-rows-none

grid-template-rows: none;

grid-rows-subgrid

grid-template-rows: subgrid;

flex-row

flex-direction: row;

flex-row-reverse

flex-direction: row-reverse;

flex-col

flex-direction: column;

flex-col-reverse

flex-direction: column-reverse;

flex-wrap

flex-wrap: wrap;

flex-nowrap

flex-wrap: nowrap;

flex-wrap-reverse

flex-wrap: wrap-reverse;

content-normal

align-content: normal;

content-center

align-content: center;

content-start

align-content: flex-start;

content-end

align-content: flex-end;

content-between

align-content: space-between;

content-around

align-content: space-around;

content-evenly

align-content: space-evenly;

content-baseline

align-content: baseline;

content-stretch

align-content: stretch;

items-center

align-items: center;

items-start

align-items: flex-start;

items-end

align-items: flex-end;

items-baseline

align-items: baseline;

items-stretch

align-items: stretch;

justify-normal

justify-content: normal;

justify-center

justify-content: center;

justify-start

justify-content: flex-start;

justify-end

justify-content: flex-end;

justify-between

justify-content: space-between;

justify-around

justify-content: space-around;

justify-evenly

justify-content: space-evenly;

justify-baseline

justify-content: baseline;

justify-stretch

justify-content: stretch;

justify-items-normal

justify-items: normal;

justify-items-center

justify-items: center;

justify-items-start

justify-items: start;

justify-items-end

justify-items: end;

justify-items-stretch

justify-items: stretch;

place-self-auto

place-self: auto;

place-self-start

place-self: start;

place-self-end

place-self: end;

place-self-center

place-self: center;

place-self-stretch

place-self: stretch;

self-auto

align-self: auto;

self-start

align-self: flex-start;

self-end

align-self: flex-end;

self-center

align-self: center;

self-stretch

align-self: stretch;

self-baseline

align-self: baseline;

justify-self-auto

justify-self: auto;

justify-self-start

justify-self: flex-start;

justify-self-end

justify-self: flex-end;

justify-self-center

justify-self: center;

justify-self-stretch

justify-self: stretch;

scroll-auto

scroll-behavior: auto;

scroll-smooth

scroll-behavior: smooth;

text-ellipsis

text-overflow: ellipsis;

text-clip

text-overflow: clip;

whitespace-normal

white-space: normal;

whitespace-nowrap

white-space: nowrap;

whitespace-pre

white-space: pre;

whitespace-pre-line

white-space: pre-line;

whitespace-pre-wrap

white-space: pre-wrap;

whitespace-break-spaces

white-space: break-spaces;

text-wrap

text-wrap: wrap;

text-nowrap

text-wrap: nowrap;

text-balance

text-wrap: balance;

text-pretty

text-wrap: pretty;

break-words

overflow-wrap: break-word;

break-all

word-break: break-all;

break-keep

word-break: break-keep;

via-none

--tw-gradient-via-stops: initial;

bg-clip-text

background-clip: text;

bg-clip-border

background-clip: border-box;

bg-clip-padding

background-clip: padding-box;

bg-clip-content

background-clip: content-box;

bg-origin-border

background-origin: border-box;

bg-origin-padding

background-origin: padding-box;

bg-origin-content

background-origin: content-box;

mix-blend-plus-darker

mix-blend-mode: plus-darker;

mix-blend-plus-lighter

mix-blend-mode: plus-lighter;

stroke-none

stroke: none;

object-contain

object-fit: contain;

object-cover

object-fit: cover;

object-fill

object-fit: fill;

object-none

object-fit: none;

object-scale-down

object-fit: scale-down;

object-bottom

object-position: bottom;

object-center

object-position: center;

object-left

object-position: left;

object-left-bottom

object-position: left bottom;

object-left-top

object-position: left top;

object-right

object-position: right;

object-right-bottom

object-position: right bottom;

object-right-top

object-position: right top;

object-top

object-position: top;

text-left

text-align: left;

text-center

text-align: center;

text-right

text-align: right;

text-justify

text-align: justify;

text-start

text-align: start;

text-end

text-align: end;

align-baseline

vertical-align: baseline;

align-top

vertical-align: top;

align-middle

vertical-align: middle;

align-bottom

vertical-align: bottom;

align-text-top

vertical-align: text-top;

align-text-bottom

vertical-align: text-bottom;

align-sub

vertical-align: sub;

align-super

vertical-align: super;

uppercase

text-transform: uppercase;

lowercase

text-transform: lowercase;

capitalize

text-transform: capitalize;

normal-case

text-transform: none;

italic

font-style: italic;

not-italic

font-style: normal;

underline

text-decoration-line: underline;

overline

text-decoration-line: overline;

line-through

text-decoration-line: line-through;

no-underline

text-decoration-line: none;

font-stretch-normal

font-stretch: normal;

font-stretch-ultra-condensed

font-stretch: ultra-condensed;

font-stretch-extra-condensed

font-stretch: extra-condensed;

font-stretch-condensed

font-stretch: condensed;

font-stretch-semi-condensed

font-stretch: semi-condensed;

font-stretch-semi-expanded

font-stretch: semi-expanded;

font-stretch-expanded

font-stretch: expanded;

font-stretch-extra-expanded

font-stretch: extra-expanded;

font-stretch-ultra-expanded

font-stretch: ultra-expanded;

decoration-solid

text-decoration-style: solid;

decoration-double

text-decoration-style: double;

decoration-dotted

text-decoration-style: dotted;

decoration-dashed

text-decoration-style: dashed;

decoration-wavy

text-decoration-style: wavy;

decoration-auto

text-decoration-thickness: auto;

decoration-from-font

text-decoration-thickness: from-font;

animate-none

animation: none;

will-change-auto

will-change: auto;

will-change-scroll

will-change: scroll-position;

will-change-contents

will-change: contents;

will-change-transform

will-change: transform;

contain-none

contain: none;

contain-content

contain: content;

contain-strict

contain: strict;

forced-color-adjust-none

forced-color-adjust: none;

forced-color-adjust-auto

forced-color-adjust: auto;

normal-nums

font-variant-numeric: normal;

underline-offset-auto

text-underline-offset: auto;

touch-none

touch-action: none;

touch-auto

touch-action: auto;

touch-pan-x

touch-action: pan-x;

cursor-auto

cursor: auto;

cursor-default

cursor: default;

select-none

-webkit-user-select: none;user-select: none;

select-text

-webkit-user-select: text;user-select: text;

rotate-0

rotate: 0deg;

rotate-90

rotate: 90deg;

border-inherit

border-color: inherit;

border-current

border-color: currentColor;

border-transparent

border-color: transparent;

border-x-black

border-left-color: rgb(0 0 0); border-right-color: rgb(0 0 0);

border-black

border-color: rgb(0 0 0);

border-white

border-color: rgb(255 255 255);

border-slate-50

border-color: rgb(248 250 252);

border-slate-100

border-color: rgb(241 245 249);

border-slate-200

border-color: rgb(226 232 240);

border-slate-300

border-color: rgb(203 213 225);

border-slate-400

border-color: rgb(148 163 184);

border-slate-500

border-color: rgb(100 116 139);

border-slate-600

border-color: rgb(71 85 105);

border-slate-700

border-color: rgb(51 65 85);

border-slate-800

border-color: rgb(30 41 59);

border-slate-900

border-color: rgb(15 23 42);

border-slate-950

border-color: rgb(2 6 23);

border-gray-50

border-color: rgb(249 250 251);

border-gray-100

border-color: rgb(243 244 246);

border-gray-200

border-color: rgb(229 231 235);

border-gray-300

border-color: rgb(209 213 219);

border-gray-400

border-color: rgb(156 163 175);

border-gray-500

border-color: rgb(107 114 128);

border-gray-600

border-color: rgb(75 85 99);

border-gray-700

border-color: rgb(55 65 81);

border-gray-800

border-color: rgb(31 41 55);

border-gray-900

border-color: rgb(17 24 39);

border-gray-950

border-color: rgb(3 7 18);

border-zinc-50

border-color: rgb(250 250 250);

border-zinc-100

border-color: rgb(244 244 245);

border-zinc-200

border-color: rgb(228 228 231);

border-zinc-300

border-color: rgb(212 212 216);

border-zinc-400

border-color: rgb(161 161 170);

border-zinc-500

border-color: rgb(113 113 122);

border-zinc-600

border-color: rgb(82 82 91);

border-zinc-700

border-color: rgb(63 63 70);

border-zinc-800

border-color: rgb(39 39 42);

border-zinc-900

border-color: rgb(24 24 27);

border-zinc-950

border-color: rgb(9 9 11);

border-neutral-50

border-color: rgb(250 250 250);

border-neutral-100

border-color: rgb(245 245 245);

border-neutral-200

border-color: rgb(229 229 229);

border-neutral-300

border-color: rgb(212 212 212);

border-neutral-400

border-color: rgb(163 163 163);

border-neutral-500

border-color: rgb(115 115 115);

border-neutral-600

border-color: rgb(82 82 82);

border-neutral-700

border-color: rgb(64 64 64);

border-neutral-800

border-color: rgb(38 38 38);

border-neutral-900

border-color: rgb(23 23 23);

border-neutral-950

border-color: rgb(10 10 10);

border-stone-50

border-color: rgb(250 250 249);

border-stone-100

border-color: rgb(245 245 244);

border-stone-200

border-color: rgb(231 229 228);

border-stone-300

border-color: rgb(214 211 209);

border-stone-400

border-color: rgb(168 162 158);

border-stone-500

border-color: rgb(120 113 108);

border-stone-600

border-color: rgb(87 83 78);

border-stone-700

border-color: rgb(68 64 60);

border-stone-800

border-color: rgb(41 37 36);

border-stone-900

border-color: rgb(28 25 23);

border-stone-950

border-color: rgb(12 10 9);

border-red-50

border-color: rgb(254 242 242);

border-red-100

border-color: rgb(254 226 226);

border-red-200

border-color: rgb(254 202 202);

border-red-300

border-color: rgb(252 165 165);

border-red-400

border-color: rgb(248 113 113);

border-red-500

border-color: rgb(239 68 68);

border-red-600

border-color: rgb(220 38 38);

border-red-700

border-color: rgb(185 28 28);

border-red-800

border-color: rgb(153 27 27);

border-red-900

border-color: rgb(127 29 29);

border-red-950

border-color: rgb(69 10 10);

border-orange-50

border-color: rgb(255 247 237);

border-orange-100

border-color: rgb(255 237 213);

border-orange-200

border-color: rgb(254 215 170);

border-orange-300

border-color: rgb(253 186 116);

border-orange-400

border-color: rgb(251 146 60);

border-orange-500

border-color: rgb(249 115 22);

border-orange-600

border-color: rgb(234 88 12);

border-orange-700

border-color: rgb(194 65 12);

border-orange-800

border-color: rgb(154 52 18);

border-orange-900

border-color: rgb(124 45 18);

border-orange-950

border-color: rgb(67 20 7);

border-amber-50

border-color: rgb(255 251 235);

border-amber-100

border-color: rgb(254 243 199);

border-amber-200

border-color: rgb(253 230 138);

border-amber-300

border-color: rgb(252 211 77);

border-amber-400

border-color: rgb(251 191 36);

border-amber-500

border-color: rgb(245 158 11);

border-amber-600

border-color: rgb(217 119 6);

border-amber-700

border-color: rgb(180 83 9);

border-amber-800

border-color: rgb(146 64 14);

border-amber-900

border-color: rgb(120 53 15);

border-amber-950

border-color: rgb(69 26 3);

border-yellow-50

border-color: rgb(254 252 232);

border-yellow-100

border-color: rgb(254 249 195);

border-yellow-200

border-color: rgb(254 240 138);

border-yellow-300

border-color: rgb(253 224 71);

border-yellow-400

border-color: rgb(250 204 21);

border-yellow-500

border-color: rgb(234 179 8);

border-yellow-600

border-color: rgb(202 138 4);

border-yellow-700

border-color: rgb(161 98 7);

border-yellow-800

border-color: rgb(133 77 14);

border-yellow-900

border-color: rgb(113 63 18);

border-yellow-950

border-color: rgb(66 32 6);

border-lime-50

border-color: rgb(247 254 231);

border-lime-100

border-color: rgb(236 252 203);

border-lime-200

border-color: rgb(217 249 157);

border-lime-300

border-color: rgb(190 242 100);

border-lime-400

border-color: rgb(163 230 53);

border-lime-500

border-color: rgb(132 204 22);

border-lime-600

border-color: rgb(101 163 13);

border-lime-700

border-color: rgb(77 124 15);

border-lime-800

border-color: rgb(63 98 18);

border-lime-900

border-color: rgb(54 83 20);

border-lime-950

border-color: rgb(26 46 5);

border-green-50

border-color: rgb(240 253 244);

border-green-100

border-color: rgb(220 252 231);

border-green-200

border-color: rgb(187 247 208);

border-green-300

border-color: rgb(134 239 172);

border-green-400

border-color: rgb(74 222 128);

border-green-500

border-color: rgb(34 197 94);

border-green-600

border-color: rgb(22 163 74);

border-green-700

border-color: rgb(21 128 61);

border-green-800

border-color: rgb(22 101 52);

border-green-900

border-color: rgb(20 83 45);

border-green-950

border-color: rgb(5 46 22);

border-emerald-50

border-color: rgb(236 253 245);

border-emerald-100

border-color: rgb(209 250 229);

border-emerald-200

border-color: rgb(167 243 208);

border-emerald-300

border-color: rgb(110 231 183);

border-emerald-400

border-color: rgb(52 211 153);

border-emerald-500

border-color: rgb(16 185 129);

border-emerald-600

border-color: rgb(5 150 105);

border-emerald-700

border-color: rgb(4 120 87);

border-emerald-800

border-color: rgb(6 95 70);

border-emerald-900

border-color: rgb(6 78 59);

border-emerald-950

border-color: rgb(2 44 34);

border-teal-50

border-color: rgb(240 253 250);

border-teal-100

border-color: rgb(204 251 241);

border-teal-200

border-color: rgb(153 246 228);

border-teal-300

border-color: rgb(94 234 212);

border-teal-400

border-color: rgb(45 212 191);

border-teal-500

border-color: rgb(20 184 166);

border-teal-600

border-color: rgb(13 148 136);

border-teal-700

border-color: rgb(15 118 110);

border-teal-800

border-color: rgb(17 94 89);

border-teal-900

border-color: rgb(19 78 74);

border-teal-950

border-color: rgb(4 47 46);

border-cyan-50

border-color: rgb(236 254 255);

border-cyan-100

border-color: rgb(207 250 254);

border-cyan-200

border-color: rgb(165 243 252);

border-cyan-300

border-color: rgb(103 232 249);

border-cyan-400

border-color: rgb(34 211 238);

border-cyan-500

border-color: rgb(6 182 212);

border-cyan-600

border-color: rgb(8 145 178);

border-cyan-700

border-color: rgb(14 116 144);

border-cyan-800

border-color: rgb(21 94 117);

border-cyan-900

border-color: rgb(22 78 99);

border-cyan-950

border-color: rgb(8 51 68);

border-sky-50

border-color: rgb(240 249 255);

border-sky-100

border-color: rgb(224 242 254);

border-sky-200

border-color: rgb(186 230 253);

border-sky-300

border-color: rgb(125 211 252);

border-sky-400

border-color: rgb(56 189 248);

border-sky-500

border-color: rgb(14 165 233);

border-sky-600

border-color: rgb(2 132 199);

border-sky-700

border-color: rgb(3 105 161);

border-sky-800

border-color: rgb(7 89 133);

border-sky-900

border-color: rgb(12 74 110);

border-sky-950

border-color: rgb(8 47 73);

border-blue-50

border-color: rgb(239 246 255);

border-blue-100

border-color: rgb(219 234 254);

border-blue-200

border-color: rgb(191 219 254);

border-blue-300

border-color: rgb(147 197 253);

border-blue-400

border-color: rgb(96 165 250);

border-blue-500

border-color: rgb(59 130 246);

border-blue-600

border-color: rgb(37 99 235);

border-blue-700

border-color: rgb(29 78 216);

border-blue-800

border-color: rgb(30 64 175);

border-blue-900

border-color: rgb(30 58 138);

border-blue-950

border-color: rgb(23 37 84);

border-indigo-50

border-color: rgb(238 242 255);

border-indigo-100

border-color: rgb(224 231 255);

border-indigo-200

border-color: rgb(199 210 254);

border-indigo-300

border-color: rgb(165 180 252);

border-indigo-400

border-color: rgb(129 140 248);

border-indigo-500

border-color: rgb(99 102 241);

border-indigo-600

border-color: rgb(79 70 229);

border-indigo-700

border-color: rgb(67 56 202);

border-indigo-800

border-color: rgb(55 48 163);

border-indigo-900

border-color: rgb(49 46 129);

border-indigo-950

border-color: rgb(30 27 75);

border-violet-50

border-color: rgb(245 243 255);

border-violet-100

border-color: rgb(237 233 254);

border-violet-200

border-color: rgb(221 214 254);

border-violet-300

border-color: rgb(196 181 253);

border-violet-400

border-color: rgb(167 139 250);

border-violet-500

border-color: rgb(139 92 246);

border-violet-600

border-color: rgb(124 58 237);

border-violet-700

border-color: rgb(109 40 217);

border-violet-800

border-color: rgb(91 33 182);

border-violet-900

border-color: rgb(76 29 149);

border-violet-950

border-color: rgb(46 16 101);

border-purple-50

border-color: rgb(250 245 255);

border-purple-100

border-color: rgb(243 232 255);

border-purple-200

border-color: rgb(233 213 255);

border-purple-300

border-color: rgb(216 180 254);

border-purple-400

border-color: rgb(192 132 252);

border-purple-500

border-color: rgb(168 85 247);

border-purple-600

border-color: rgb(147 51 234);

border-purple-700

border-color: rgb(126 34 206);

border-purple-800

border-color: rgb(107 33 168);

border-purple-900

border-color: rgb(88 28 135);

border-purple-950

border-color: rgb(59 7 100);

border-fuchsia-50

border-color: rgb(253 244 255);

border-fuchsia-100

border-color: rgb(250 232 255);

border-fuchsia-200

border-color: rgb(245 208 254);

border-fuchsia-300

border-color: rgb(240 171 252);

border-fuchsia-400

border-color: rgb(232 121 249);

border-fuchsia-500

border-color: rgb(217 70 239);

border-fuchsia-600

border-color: rgb(192 38 211);

border-fuchsia-700

border-color: rgb(162 28 175);

border-fuchsia-800

border-color: rgb(134 25 143);

border-fuchsia-900

border-color: rgb(112 26 117);

border-fuchsia-950

border-color: rgb(74 4 78);

border-pink-50

border-color: rgb(253 242 248);

border-pink-100

border-color: rgb(252 231 243);

border-pink-200

border-color: rgb(251 207 232);

border-pink-300

border-color: rgb(249 168 212);

border-pink-400

border-color: rgb(244 114 182);

border-pink-500

border-color: rgb(236 72 153);

border-pink-600

border-color: rgb(219 39 119);

border-pink-700

border-color: rgb(190 24 93);

border-pink-800

border-color: rgb(157 23 77);

border-pink-900

border-color: rgb(131 24 67);

border-pink-950

border-color: rgb(80 7 36);

border-rose-50

border-color: rgb(255 241 242);

border-rose-100

border-color: rgb(255 228 230);

border-rose-200

border-color: rgb(254 205 211);

border-rose-300

border-color: rgb(253 164 175);

border-rose-400

border-color: rgb(251 113 133);

border-rose-500

border-color: rgb(244 63 94);

border-rose-600

border-color: rgb(225 29 72);

border-rose-700

border-color: rgb(190 18 60);

border-rose-800

border-color: rgb(159 18 57);

border-rose-900

border-color: rgb(136 19 55);

border-rose-950

border-color: rgb(76 5 25);

w-0

width: 0px;

w-px

width: 1px;

w-0.5

width: 0.125rem;

w-1

width: 0.25rem;

w-1.5

width: 0.375rem;

w-2

width: 0.5rem;

w-2.5

width: 0.625rem;

w-3

width: 0.75rem;

w-3.5

width: 0.875rem;

w-4

width: 1rem;

w-5

width: 1.25rem;

w-6

width: 1.5rem;

w-7

width: 1.75rem;

w-8

width: 2rem;

w-9

width: 2.25rem;

w-10

width: 2.5rem;

w-11

width: 2.75rem;

w-12

width: 3rem;

w-14

width: 3.5rem;

w-16

width: 4rem;

w-20

width: 5rem;

w-24

width: 6rem;

w-28

width: 7rem;

w-32

width: 8rem;

w-36

width: 9rem;

w-40

width: 10rem;

w-44

width: 11rem;

w-48

width: 12rem;

w-52

width: 13rem;

w-56

width: 14rem;

w-60

width: 15rem;

w-64

width: 16rem;

w-72

width: 18rem;

w-80

width: 20rem;

w-96

width: 24rem;

w-auto

width: auto;

w-1/2

width: 50%;

w-1/3

width: 33.333333%;

w-2/3

width: 66.666667%;

w-1/4

width: 25%;

w-2/4

width: 50%;

w-3/4

width: 75%;

w-1/5

width: 20%;

w-2/5

width: 40%;

w-3/5

width: 60%;

w-4/5

width: 80%;

w-1/6

width: 16.666667%;

w-2/6

width: 33.333333%;

w-3/6

width: 50%;

w-4/6

width: 66.666667%;

w-5/6

width: 83.333333%;

w-1/12

width: 8.333333%;

w-2/12

width: 16.666667%;

w-3/12

width: 25%;

w-4/12

width: 33.333333%;

w-5/12

width: 41.666667%;

w-6/12

width: 50%;

w-7/12

width: 58.333333%;

w-8/12

width: 66.666667%;

w-9/12

width: 75%;

w-10/12

width: 83.333333%;

w-11/12

width: 91.666667%;

w-full

width: 100%;

w-screen

width: 100vw;

w-svw

width: 100svw;

w-lvw

width: 100lvw;

w-dvw

width: 100dvw;

w-min

width: min-content;

w-max

width: max-content;

w-fit

width: fit-content;

h-0

height: 0px;

h-px

height: 1px;

h-0.5

height: 0.125rem;

h-1

height: 0.25rem;

h-1.5

height: 0.375rem;

h-2

height: 0.5rem;

h-2.5

height: 0.625rem;

h-3

height: 0.75rem;

h-3.5

height: 0.875rem;

h-4

height: 1rem;

h-5

height: 1.25rem;

h-6

height: 1.5rem;

h-7

height: 1.75rem;

h-8

height: 2rem;

h-9

height: 2.25rem;

h-10

height: 2.5rem;

h-11

height: 2.75rem;

h-12

height: 3rem;

h-14

height: 3.5rem;

h-16

height: 4rem;

h-20

height: 5rem;

h-24

height: 6rem;

h-28

height: 7rem;

h-32

height: 8rem;

h-36

height: 9rem;

h-40

height: 10rem;

h-44

height: 11rem;

h-48

height: 12rem;

h-52

height: 13rem;

h-56

height: 14rem;

h-60

height: 15rem;

h-64

height: 16rem;

h-72

height: 18rem;

h-80

height: 20rem;

h-96

height: 24rem;

h-auto

height: auto;

h-1/2

height: 50%;

h-1/3

height: 33.333333%;

h-2/3

height: 66.666667%;

h-1/4

height: 25%;

h-2/4

height: 50%;

h-3/4

height: 75%;

h-1/5

height: 20%;

h-2/5

height: 40%;

h-3/5

height: 60%;

h-4/5

height: 80%;

h-1/6

height: 16.666667%;

h-2/6

height: 33.333333%;

h-3/6

height: 50%;

h-4/6

height: 66.666667%;

h-5/6

height: 83.333333%;

h-full

height: 100%;

h-screen

height: 100vh;

h-svh

height: 100svh;

h-lvh

height: 100lvh;

h-dvh

height: 100dvh;

h-min

height: min-content;

h-max

height: max-content;

h-fit

height: fit-content;

min-w-0

min-width: 0px;

min-w-1

min-width: 0.25rem;

min-w-2

min-width: 0.5rem;

min-w-3

min-width: 0.75rem;

min-w-4

min-width: 1rem;

min-w-5

min-width: 1.25rem;

min-w-6

min-width: 1.5rem;

min-w-7

min-width: 1.75rem;

min-w-8

min-width: 2rem;

min-w-9

min-width: 2.25rem;

min-w-10

min-width: 2.5rem;

min-w-11

min-width: 2.75rem;

min-w-12

min-width: 3rem;

min-w-14

min-width: 3.5rem;

min-w-16

min-width: 4rem;

min-w-20

min-width: 5rem;

min-w-24

min-width: 6rem;

min-w-28

min-width: 7rem;

min-w-32

min-width: 8rem;

min-w-36

min-width: 9rem;

min-w-40

min-width: 10rem;

min-w-44

min-width: 11rem;

min-w-48

min-width: 12rem;

min-w-52

min-width: 13rem;

min-w-56

min-width: 14rem;

min-w-60

min-width: 15rem;

min-w-64

min-width: 16rem;

min-w-72

min-width: 18rem;

min-w-80

min-width: 20rem;

min-w-96

min-width: 24rem;

min-w-px

min-width: 1px;

min-w-0.5

min-width: 0.125rem;

min-w-1.5

min-width: 0.375rem;

min-w-2.5

min-width: 0.625rem;

min-w-3.5

min-width: 0.875rem;

min-w-full

min-width: 100%;

min-w-min

min-width: min-content;

min-w-max

min-width: max-content;

min-w-fit

min-width: fit-content;

max-w-0

max-width: 0px;

max-w-1

max-width: 0.25rem;

max-w-2

max-width: 0.5rem;

max-w-3

max-width: 0.75rem;

max-w-4

max-width: 1rem;

max-w-5

max-width: 1.25rem;

max-w-6

max-width: 1.5rem;

max-w-7

max-width: 1.75rem;

max-w-8

max-width: 2rem;

max-w-9

max-width: 2.25rem;

max-w-10

max-width: 2.5rem;

max-w-11

max-width: 2.75rem;

max-w-12

max-width: 3rem;

max-w-14

max-width: 3.5rem;

max-w-16

max-width: 4rem;

max-w-20

max-width: 5rem;

max-w-24

max-width: 6rem;

max-w-28

max-width: 7rem;

max-w-32

max-width: 8rem;

max-w-36

max-width: 9rem;

max-w-40

max-width: 10rem;

max-w-44

max-width: 11rem;

max-w-48

max-width: 12rem;

max-w-52

max-width: 13rem;

max-w-56

max-width: 14rem;

max-w-60

max-width: 15rem;

max-w-64

max-width: 16rem;

max-w-72

max-width: 18rem;

max-w-80

max-width: 20rem;

max-w-96

max-width: 24rem;

max-w-px

max-width: 1px;

max-w-0.5

max-width: 0.125rem;

max-w-1.5

max-width: 0.375rem;

max-w-2.5

max-width: 0.625rem;

max-w-3.5

max-width: 0.875rem;

max-w-full

max-width: 100%;

max-w-max

max-width: max-content;

max-w-min

max-width: min-content;

max-w-fit

max-width: fit-content;

size-0

width: 0px; height: 0px;

size-px

width: 1px; height: 1px;

size-0.5

width: 0.125rem; height: 0.125rem;

size-1

width: 0.25rem; height: 0.25rem;

size-1.5

width: 0.375rem; height: 0.375rem;

size-2

width: 0.5rem; height: 0.5rem;

size-2.5

width: 0.625rem; height: 0.625rem;

size-3

width: 0.75rem; height: 0.75rem;

size-3.5

width: 0.875rem; height: 0.875rem;

size-4

width: 1rem; height: 1rem;

size-5

width: 1.25rem; height: 1.25rem;

size-6

width: 1.5rem; height: 1.5rem;

size-7

width: 1.75rem; height: 1.75rem;

size-8

width: 2rem; height: 2rem;

size-9

width: 2.25rem; height: 2.25rem;

size-10

width: 2.5rem; height: 2.5rem;

size-11

width: 2.75rem; height: 2.75rem;

size-12

width: 3rem; height: 3rem;

size-14

width: 3.5rem; height: 3.5rem;

size-16

width: 4rem; height: 4rem;

size-20

width: 5rem; height: 5rem;

size-24

width: 6rem; height: 6rem;

size-28

width: 7rem; height: 7rem;

size-32

width: 8rem; height: 8rem;

size-36

width: 9rem; height: 9rem;

size-40

width: 10rem; height: 10rem;

size-44

width: 11rem; height: 11rem;

size-48

width: 12rem; height: 12rem;

size-52

width: 13rem; height: 13rem;

size-56

width: 14rem; height: 14rem;

size-60

width: 15rem; height: 15rem;

size-64

width: 16rem; height: 16rem;

size-72

width: 18rem; height: 18rem;

size-80

width: 20rem; height: 20rem;

size-96

width: 24rem; height: 24rem;

size-auto

width: auto; height: auto;

size-1/2

width: 50%; height: 50%;

size-1/3

width: 33.333333%; height: 33.333333%;

size-2/3

width: 66.666667%; height: 66.666667%;

size-1/4

width: 25%; height: 25%;

size-2/4

width: 50%; height: 50%;

size-3/4

width: 75%; height: 75%;

size-1/5

width: 20%; height: 20%;

size-2/5

width: 40%; height: 40%;

size-3/5

width: 60%; height: 60%;

size-4/5

width: 80%; height: 80%;

size-1/6

width: 16.666667%; height: 16.666667%;

size-2/6

width: 33.333333%; height: 33.333333%;

size-3/6

width: 50%; height: 50%;

size-4/6

width: 66.666667%; height: 66.666667%;

size-5/6

width: 83.333333%; height: 83.333333%;

size-1/12

width: 8.333333%; height: 8.333333%;

size-2/12

width: 16.666667%; height: 16.666667%;

size-3/12

width: 25%; height: 25%;

size-4/12

width: 33.333333%; height: 33.333333%;

size-5/12

width: 41.666667%; height: 41.666667%;

size-6/12

width: 50%; height: 50%;

size-7/12

width: 58.333333%; height: 58.333333%;

size-8/12

width: 66.666667%; height: 66.666667%;

size-9/12

width: 75%; height: 75%;

size-10/12

width: 83.333333%; height: 83.333333%;

size-11/12

width: 91.666667%; height: 91.666667%;

size-full

width: 100%; height: 100%;

size-min

width: min-content; height: min-content;

size-max

width: max-content; height: max-content;

size-fit

width: fit-content; height: fit-content;

Colors

View Colors

inherit

inherit

current

currentColor

transparent

transparent

black

rgb(0 0 0)

white

rgb(255 255 255)

slate-50

rgb(248 250 252)

slate-100

rgb(241 245 249)

slate-200

rgb(226 232 240)

slate-300

rgb(203 213 225)

slate-400

rgb(148 163 184)

slate-500

rgb(100 116 139)

slate-600

rgb(71 85 105)

slate-700

rgb(51 65 85)

slate-800

rgb(30 41 59)

slate-900

rgb(15 23 42)

slate-950

rgb(2 6 23)

gray-50

rgb(249 250 251)

gray-100

rgb(243 244 246)

gray-200

rgb(229 231 235)

gray-300

rgb(209 213 219)

gray-400

rgb(156 163 175)

gray-500

rgb(107 114 128)

gray-600

rgb(75 85 99)

gray-700

rgb(55 65 81)

gray-800

rgb(31 41 55)

gray-900

rgb(17 24 39)

gray-950

rgb(3 7 18)

zinc-50

rgb(250 250 250)

zinc-100

rgb(244 244 245)

zinc-200

rgb(228 228 231)

zinc-300

rgb(212 212 216)

zinc-400

rgb(161 161 170)

zinc-500

rgb(113 113 122)

zinc-600

rgb(82 82 91)

zinc-700

rgb(63 63 70)

zinc-800

rgb(39 39 42)

zinc-900

rgb(24 24 27)

zinc-950

rgb(9 9 11)

neutral-50

rgb(250 250 250)

neutral-100

rgb(245 245 245)

neutral-200

rgb(229 229 229)

neutral-300

rgb(212 212 212)

neutral-400

rgb(163 163 163)

neutral-500

rgb(115 115 115)

neutral-600

rgb(82 82 82)

neutral-700

rgb(64 64 64)

neutral-800

rgb(38 38 38)

neutral-900

rgb(23 23 23)

neutral-950

rgb(10 10 10)

stone-50

rgb(250 250 249)

stone-100

rgb(245 245 244)

stone-200

rgb(231 229 228)

stone-300

rgb(214 211 209)

stone-400

rgb(168 162 158)

stone-500

rgb(120 113 108)

stone-600

rgb(87 83 78)

stone-700

rgb(68 64 60)

stone-800

rgb(41 37 36)

stone-900

rgb(28 25 23)

stone-950

rgb(12 10 9)

red-50

rgb(254 242 242)

red-100

rgb(254 226 226)

red-200

rgb(254 202 202)

red-300

rgb(252 165 165)

red-400

rgb(248 113 113)

red-500

rgb(239 68 68)

red-600

rgb(220 38 38)

red-700

rgb(185 28 28)

red-800

rgb(153 27 27)

red-900

rgb(127 29 29)

red-950

rgb(69 10 10)

orange-50

rgb(255 247 237)

orange-100

rgb(255 237 213)

orange-200

rgb(254 215 170)

orange-300

rgb(253 186 116)

orange-400

rgb(251 146 60)

orange-500

rgb(249 115 22)

orange-600

rgb(234 88 12)

orange-700

rgb(194 65 12)

orange-800

rgb(154 52 18)

orange-900

rgb(124 45 18)

orange-950

rgb(67 20 7)

amber-50

rgb(255 251 235)

amber-100

rgb(254 243 199)

amber-200

rgb(253 230 138)

amber-300

rgb(252 211 77)

amber-400

rgb(251 191 36)

amber-500

rgb(245 158 11)

amber-600

rgb(217 119 6)

amber-700

rgb(180 83 9)

amber-800

rgb(146 64 14)

amber-900

rgb(120 53 15)

amber-950

rgb(69 26 3)

yellow-50

rgb(254 252 232)

yellow-100

rgb(254 249 195)

yellow-200

rgb(254 240 138)

yellow-300

rgb(253 224 71)

yellow-400

rgb(250 204 21)

yellow-500

rgb(234 179 8)

yellow-600

rgb(202 138 4)

yellow-700

rgb(161 98 7)

yellow-800

rgb(133 77 14)

yellow-900

rgb(113 63 18)

yellow-950

rgb(66 32 6)

lime-50

rgb(247 254 231)

lime-100

rgb(236 252 203)

lime-200

rgb(217 249 157)

lime-300

rgb(190 242 100)

lime-400

rgb(163 230 53)

lime-500

rgb(132 204 22)

lime-600

rgb(101 163 13)

lime-700

rgb(77 124 15)

lime-800

rgb(63 98 18)

lime-900

rgb(54 83 20)

lime-950

rgb(26 46 5)

green-50

rgb(240 253 244)

green-100

rgb(220 252 231)

green-200

rgb(187 247 208)

green-300

rgb(134 239 172)

green-400

rgb(74 222 128)

green-500

rgb(34 197 94)

green-600

rgb(22 163 74)

green-700

rgb(21 128 61)

green-800

rgb(22 101 52)

green-900

rgb(20 83 45)

green-950

rgb(5 46 22)

emerald-50

rgb(236 253 245)

emerald-100

rgb(209 250 229)

emerald-200

rgb(167 243 208)

emerald-300

rgb(110 231 183)

emerald-400

rgb(52 211 153)

emerald-500

rgb(16 185 129)

emerald-600

rgb(5 150 105)

emerald-700

rgb(4 120 87)

emerald-800

rgb(6 95 70)

emerald-900

rgb(6 78 59)

emerald-950

rgb(2 44 34)

teal-50

rgb(240 253 250)

teal-100

rgb(204 251 241)

teal-200

rgb(153 246 228)

teal-300

rgb(94 234 212)

teal-400

rgb(45 212 191)

teal-500

rgb(20 184 166)

teal-600

rgb(13 148 136)

teal-700

rgb(15 118 110)

teal-800

rgb(17 94 89)

teal-900

rgb(19 78 74)

teal-950

rgb(4 47 46)

cyan-50

rgb(236 254 255)

cyan-100

rgb(207 250 254)

cyan-200

rgb(165 243 252)

cyan-300

rgb(103 232 249)

cyan-400

rgb(34 211 238)

cyan-500

rgb(6 182 212)

cyan-600

rgb(8 145 178)

cyan-700

rgb(14 116 144)

cyan-800

rgb(21 94 117)

cyan-900

rgb(22 78 99)

cyan-950

rgb(8 51 68)

sky-50

rgb(240 249 255)

sky-100

rgb(224 242 254)

sky-200

rgb(186 230 253)

sky-300

rgb(125 211 252)

sky-400

rgb(56 189 248)

sky-500

rgb(14 165 233)

sky-600

rgb(2 132 199)

sky-700

rgb(3 105 161)

sky-800

rgb(7 89 133)

sky-900

rgb(12 74 110)

sky-950

rgb(8 47 73)

blue-50

rgb(239 246 255)

blue-100

rgb(219 234 254)

blue-200

rgb(191 219 254)

blue-300

rgb(147 197 253)

blue-400

rgb(96 165 250)

blue-500

rgb(59 130 246)

blue-600

rgb(37 99 235)

blue-700

rgb(29 78 216)

blue-800

rgb(30 64 175)

blue-900

rgb(30 58 138)

blue-950

rgb(23 37 84)

indigo-50

rgb(238 242 255)

indigo-100

rgb(224 231 255)

indigo-200

rgb(199 210 254)

indigo-300

rgb(165 180 252)

indigo-400

rgb(129 140 248)

indigo-500

rgb(99 102 241)

indigo-600

rgb(79 70 229)

indigo-700

rgb(67 56 202)

indigo-800

rgb(55 48 163)

indigo-900

rgb(49 46 129)

indigo-950

rgb(30 27 75)

violet-50

rgb(245 243 255)

violet-100

rgb(237 233 254)

violet-200

rgb(221 214 254)

violet-300

rgb(196 181 253)

violet-400

rgb(167 139 250)

violet-500

rgb(139 92 246)

violet-600

rgb(124 58 237)

violet-700

rgb(109 40 217)

violet-800

rgb(91 33 182)

violet-900

rgb(76 29 149)

violet-950

rgb(46 16 101)

purple-50

rgb(250 245 255)

purple-100

rgb(243 232 255)

purple-200

rgb(233 213 255)

purple-300

rgb(216 180 254)

purple-400

rgb(192 132 252)

purple-500

rgb(168 85 247)

purple-600

rgb(147 51 234)

purple-700

rgb(126 34 206)

purple-800

rgb(107 33 168)

purple-900

rgb(88 28 135)

purple-950

rgb(59 7 100)

fuchsia-50

rgb(253 244 255)

fuchsia-100

rgb(250 232 255)

fuchsia-200

rgb(245 208 254)

fuchsia-300

rgb(240 171 252)

fuchsia-400

rgb(232 121 249)

fuchsia-500

rgb(217 70 239)

fuchsia-600

rgb(192 38 211)

fuchsia-700

rgb(162 28 175)

fuchsia-800

rgb(134 25 143)

fuchsia-900

rgb(112 26 117)

fuchsia-950

rgb(74 4 78)

pink-50

rgb(253 242 248)

pink-100

rgb(252 231 243)

pink-200

rgb(251 207 232)

pink-300

rgb(249 168 212)

pink-400

rgb(244 114 182)

pink-500

rgb(236 72 153)

pink-600

rgb(219 39 119)

pink-700

rgb(190 24 93)

pink-800

rgb(157 23 77)

pink-900

rgb(131 24 67)

pink-950

rgb(80 7 36)

rose-50

rgb(255 241 242)

rose-100

rgb(255 228 230)

rose-200

rgb(254 205 211)

rose-300

rgb(253 164 175)

rose-400

rgb(251 113 133)

rose-500

rgb(244 63 94)

rose-600

rgb(225 29 72)

rose-700

rgb(190 18 60)

rose-800

rgb(159 18 57)

rose-900

rgb(136 19 55)

rose-950

rgb(76 5 25)