@radix-ui/themes/tokens/colors/crimson.css

[](https://radix-ui.com/themes)

:root, .light, .light-theme {
    --crimson-1: #fffcfd;
    --crimson-2: #fef7f9;
    --crimson-3: #ffe9f0;
    --crimson-4: #fedce7;
    --crimson-5: #facedd;
    --crimson-6: #f3bed1;
    --crimson-7: #eaacc3;
    --crimson-8: #e093b2;
    --crimson-9: #e93d82;
    --crimson-10: #df3478;
    --crimson-11: #cb1d63;
    --crimson-12: #621639;
    --crimson-a1: #ff005503;
    --crimson-a2: #e0004008;
    --crimson-a3: #ff005216;
    --crimson-a4: #f8005123;
    --crimson-a5: #e5004f31;
    --crimson-a6: #d0004b41;
    --crimson-a7: #bf004753;
    --crimson-a8: #b6004a6c;
    --crimson-a9: #e2005bc2;
    --crimson-a10: #d70056cb;
    --crimson-a11: #c4004fe2;
    --crimson-a12: #530026e9;
    --crimson-surface: #fef5f8cc;
    --crimson-indicator: var(--crimson-9);
    --crimson-track: var(--crimson-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --crimson-1: color(display-p3 0.998 0.989 0.992);
            --crimson-2: color(display-p3 0.991 0.969 0.976);
            --crimson-3: color(display-p3 0.987 0.917 0.941);
            --crimson-4: color(display-p3 0.975 0.866 0.904);
            --crimson-5: color(display-p3 0.953 0.813 0.864);
            --crimson-6: color(display-p3 0.921 0.755 0.817);
            --crimson-7: color(display-p3 0.88 0.683 0.761);
            --crimson-8: color(display-p3 0.834 0.592 0.694);
            --crimson-9: color(display-p3 0.843 0.298 0.507);
            --crimson-10: color(display-p3 0.807 0.266 0.468);
            --crimson-11: color(display-p3 0.731 0.195 0.388);
            --crimson-12: color(display-p3 0.352 0.111 0.221);
            --crimson-a1: color(display-p3 0.675 0.024 0.349 / 0.012);
            --crimson-a2: color(display-p3 0.757 0.02 0.267 / 0.032);
            --crimson-a3: color(display-p3 0.859 0.008 0.294 / 0.083);
            --crimson-a4: color(display-p3 0.827 0.008 0.298 / 0.134);
            --crimson-a5: color(display-p3 0.753 0.008 0.275 / 0.189);
            --crimson-a6: color(display-p3 0.682 0.004 0.247 / 0.244);
            --crimson-a7: color(display-p3 0.62 0.004 0.251 / 0.318);
            --crimson-a8: color(display-p3 0.6 0.004 0.251 / 0.408);
            --crimson-a9: color(display-p3 0.776 0 0.298 / 0.702);
            --crimson-a10: color(display-p3 0.737 0 0.275 / 0.734);
            --crimson-a11: color(display-p3 0.731 0.195 0.388);
            --crimson-a12: color(display-p3 0.352 0.111 0.221);
            --crimson-surface: color(display-p3 0.9922 0.9608 0.9725 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --crimson-1: #191114;
    --crimson-2: #201318;
    --crimson-3: #381525;
    --crimson-4: #4d122f;
    --crimson-5: #5c1839;
    --crimson-6: #6d2545;
    --crimson-7: #873356;
    --crimson-8: #b0436e;
    --crimson-9: #e93d82;
    --crimson-10: #ee518a;
    --crimson-11: #ff92ad;
    --crimson-12: #fdd3e8;
    --crimson-a1: #f4126709;
    --crimson-a2: #f22f7a11;
    --crimson-a3: #fe2a8b2a;
    --crimson-a4: #fd158741;
    --crimson-a5: #fd278f51;
    --crimson-a6: #fe459763;
    --crimson-a7: #fd559b7f;
    --crimson-a8: #fe5b9bab;
    --crimson-a9: #fe418de8;
    --crimson-a10: #ff5693ed;
    --crimson-a11: #ff92ad;
    --crimson-a12: #ffd5eafd;
    --crimson-surface: #2f151f80;
    --crimson-indicator: var(--crimson-9);
    --crimson-track: var(--crimson-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --crimson-1: color(display-p3 0.093 0.068 0.078);
            --crimson-2: color(display-p3 0.117 0.078 0.095);
            --crimson-3: color(display-p3 0.203 0.091 0.143);
            --crimson-4: color(display-p3 0.277 0.087 0.182);
            --crimson-5: color(display-p3 0.332 0.115 0.22);
            --crimson-6: color(display-p3 0.394 0.162 0.268);
            --crimson-7: color(display-p3 0.489 0.222 0.336);
            --crimson-8: color(display-p3 0.638 0.289 0.429);
            --crimson-9: color(display-p3 0.843 0.298 0.507);
            --crimson-10: color(display-p3 0.864 0.364 0.539);
            --crimson-11: color(display-p3 1 0.56 0.66);
            --crimson-12: color(display-p3 0.966 0.834 0.906);
            --crimson-a1: color(display-p3 0.984 0.071 0.463 / 0.03);
            --crimson-a2: color(display-p3 0.996 0.282 0.569 / 0.055);
            --crimson-a3: color(display-p3 0.996 0.227 0.573 / 0.148);
            --crimson-a4: color(display-p3 1 0.157 0.569 / 0.227);
            --crimson-a5: color(display-p3 1 0.231 0.604 / 0.286);
            --crimson-a6: color(display-p3 1 0.337 0.643 / 0.349);
            --crimson-a7: color(display-p3 1 0.416 0.663 / 0.454);
            --crimson-a8: color(display-p3 0.996 0.427 0.651 / 0.614);
            --crimson-a9: color(display-p3 1 0.345 0.596 / 0.832);
            --crimson-a10: color(display-p3 1 0.42 0.62 / 0.853);
            --crimson-a11: color(display-p3 1 0.56 0.66);
            --crimson-a12: color(display-p3 0.966 0.834 0.906);
            --crimson-surface: color(display-p3 0.1647 0.0863 0.1176 / 0.5);
        }
    }
}
:root {
    --crimson-contrast: white;
}