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

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

:root, .light, .light-theme {
    --pink-1: #fffcfe;
    --pink-2: #fef7fb;
    --pink-3: #fee9f5;
    --pink-4: #fbdcef;
    --pink-5: #f6cee7;
    --pink-6: #efbfdd;
    --pink-7: #e7acd0;
    --pink-8: #dd93c2;
    --pink-9: #d6409f;
    --pink-10: #cf3897;
    --pink-11: #c2298a;
    --pink-12: #651249;
    --pink-a1: #ff00aa03;
    --pink-a2: #e0008008;
    --pink-a3: #f4008c16;
    --pink-a4: #e2008b23;
    --pink-a5: #d1008331;
    --pink-a6: #c0007840;
    --pink-a7: #b6006f53;
    --pink-a8: #af006f6c;
    --pink-a9: #c8007fbf;
    --pink-a10: #c2007ac7;
    --pink-a11: #b60074d6;
    --pink-a12: #59003bed;
    --pink-surface: #fef5facc;
    --pink-indicator: var(--pink-9);
    --pink-track: var(--pink-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --pink-1: color(display-p3 0.998 0.989 0.996);
            --pink-2: color(display-p3 0.992 0.97 0.985);
            --pink-3: color(display-p3 0.981 0.917 0.96);
            --pink-4: color(display-p3 0.963 0.867 0.932);
            --pink-5: color(display-p3 0.939 0.815 0.899);
            --pink-6: color(display-p3 0.907 0.756 0.859);
            --pink-7: color(display-p3 0.869 0.683 0.81);
            --pink-8: color(display-p3 0.825 0.59 0.751);
            --pink-9: color(display-p3 0.775 0.297 0.61);
            --pink-10: color(display-p3 0.748 0.27 0.581);
            --pink-11: color(display-p3 0.698 0.219 0.528);
            --pink-12: color(display-p3 0.363 0.101 0.279);
            --pink-a1: color(display-p3 0.675 0.024 0.675 / 0.012);
            --pink-a2: color(display-p3 0.757 0.02 0.51 / 0.032);
            --pink-a3: color(display-p3 0.765 0.008 0.529 / 0.083);
            --pink-a4: color(display-p3 0.737 0.008 0.506 / 0.134);
            --pink-a5: color(display-p3 0.663 0.004 0.451 / 0.185);
            --pink-a6: color(display-p3 0.616 0.004 0.424 / 0.244);
            --pink-a7: color(display-p3 0.596 0.004 0.412 / 0.318);
            --pink-a8: color(display-p3 0.573 0.004 0.404 / 0.412);
            --pink-a9: color(display-p3 0.682 0 0.447 / 0.702);
            --pink-a10: color(display-p3 0.655 0 0.424 / 0.73);
            --pink-a11: color(display-p3 0.698 0.219 0.528);
            --pink-a12: color(display-p3 0.363 0.101 0.279);
            --pink-surface: color(display-p3 0.9922 0.9608 0.9804 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --pink-1: #191117;
    --pink-2: #21121d;
    --pink-3: #37172f;
    --pink-4: #4b143d;
    --pink-5: #591c47;
    --pink-6: #692955;
    --pink-7: #833869;
    --pink-8: #a84885;
    --pink-9: #d6409f;
    --pink-10: #de51a8;
    --pink-11: #ff8dcc;
    --pink-12: #fdd1ea;
    --pink-a1: #f412bc09;
    --pink-a2: #f420bb12;
    --pink-a3: #fe37cc29;
    --pink-a4: #fc1ec43f;
    --pink-a5: #fd35c24e;
    --pink-a6: #fd51c75f;
    --pink-a7: #fd62c87b;
    --pink-a8: #ff68c8a2;
    --pink-a9: #fe49bcd4;
    --pink-a10: #ff5cc0dc;
    --pink-a11: #ff8dcc;
    --pink-a12: #ffd3ecfd;
    --pink-surface: #31132980;
    --pink-indicator: var(--pink-9);
    --pink-track: var(--pink-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --pink-1: color(display-p3 0.093 0.068 0.089);
            --pink-2: color(display-p3 0.121 0.073 0.11);
            --pink-3: color(display-p3 0.198 0.098 0.179);
            --pink-4: color(display-p3 0.271 0.095 0.231);
            --pink-5: color(display-p3 0.32 0.127 0.273);
            --pink-6: color(display-p3 0.382 0.177 0.326);
            --pink-7: color(display-p3 0.477 0.238 0.405);
            --pink-8: color(display-p3 0.612 0.304 0.51);
            --pink-9: color(display-p3 0.775 0.297 0.61);
            --pink-10: color(display-p3 0.808 0.356 0.645);
            --pink-11: color(display-p3 1 0.535 0.78);
            --pink-12: color(display-p3 0.964 0.826 0.912);
            --pink-a1: color(display-p3 0.984 0.071 0.855 / 0.03);
            --pink-a2: color(display-p3 1 0.2 0.8 / 0.059);
            --pink-a3: color(display-p3 1 0.294 0.886 / 0.139);
            --pink-a4: color(display-p3 1 0.192 0.82 / 0.219);
            --pink-a5: color(display-p3 1 0.282 0.827 / 0.274);
            --pink-a6: color(display-p3 1 0.396 0.835 / 0.337);
            --pink-a7: color(display-p3 1 0.459 0.831 / 0.442);
            --pink-a8: color(display-p3 1 0.478 0.827 / 0.585);
            --pink-a9: color(display-p3 1 0.373 0.784 / 0.761);
            --pink-a10: color(display-p3 1 0.435 0.792 / 0.795);
            --pink-a11: color(display-p3 1 0.535 0.78);
            --pink-a12: color(display-p3 0.964 0.826 0.912);
            --pink-surface: color(display-p3 0.1725 0.0784 0.149 / 0.5);
        }
    }
}
:root {
    --pink-contrast: white;
}