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

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

:root, .light, .light-theme {
    --cyan-1: #fafdfe;
    --cyan-2: #f2fafb;
    --cyan-3: #def7f9;
    --cyan-4: #caf1f6;
    --cyan-5: #b5e9f0;
    --cyan-6: #9ddde7;
    --cyan-7: #7dcedc;
    --cyan-8: #3db9cf;
    --cyan-9: #00a2c7;
    --cyan-10: #0797b9;
    --cyan-11: #107d98;
    --cyan-12: #0d3c48;
    --cyan-a1: #0099cc05;
    --cyan-a2: #009db10d;
    --cyan-a3: #00c2d121;
    --cyan-a4: #00bcd435;
    --cyan-a5: #01b4cc4a;
    --cyan-a6: #00a7c162;
    --cyan-a7: #009fbb82;
    --cyan-a8: #00a3c0c2;
    --cyan-a9: #00a2c7;
    --cyan-a10: #0094b7f8;
    --cyan-a11: #007491ef;
    --cyan-a12: #00323ef2;
    --cyan-surface: #eff9facc;
    --cyan-indicator: var(--cyan-9);
    --cyan-track: var(--cyan-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --cyan-1: color(display-p3 0.982 0.992 0.996);
            --cyan-2: color(display-p3 0.955 0.981 0.984);
            --cyan-3: color(display-p3 0.888 0.965 0.975);
            --cyan-4: color(display-p3 0.821 0.941 0.959);
            --cyan-5: color(display-p3 0.751 0.907 0.935);
            --cyan-6: color(display-p3 0.671 0.862 0.9);
            --cyan-7: color(display-p3 0.564 0.8 0.854);
            --cyan-8: color(display-p3 0.388 0.715 0.798);
            --cyan-9: color(display-p3 0.282 0.627 0.765);
            --cyan-10: color(display-p3 0.264 0.583 0.71);
            --cyan-11: color(display-p3 0.08 0.48 0.63);
            --cyan-12: color(display-p3 0.108 0.232 0.277);
            --cyan-a1: color(display-p3 0.02 0.608 0.804 / 0.02);
            --cyan-a2: color(display-p3 0.02 0.557 0.647 / 0.044);
            --cyan-a3: color(display-p3 0.004 0.694 0.796 / 0.114);
            --cyan-a4: color(display-p3 0.004 0.678 0.784 / 0.181);
            --cyan-a5: color(display-p3 0.004 0.624 0.733 / 0.248);
            --cyan-a6: color(display-p3 0.004 0.584 0.706 / 0.33);
            --cyan-a7: color(display-p3 0.004 0.541 0.667 / 0.436);
            --cyan-a8: color(display-p3 0 0.533 0.667 / 0.612);
            --cyan-a9: color(display-p3 0 0.482 0.675 / 0.718);
            --cyan-a10: color(display-p3 0 0.435 0.608 / 0.738);
            --cyan-a11: color(display-p3 0.08 0.48 0.63);
            --cyan-a12: color(display-p3 0.108 0.232 0.277);
            --cyan-surface: color(display-p3 0.9412 0.9765 0.9804 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --cyan-1: #0b161a;
    --cyan-2: #101b20;
    --cyan-3: #082c36;
    --cyan-4: #003848;
    --cyan-5: #004558;
    --cyan-6: #045468;
    --cyan-7: #12677e;
    --cyan-8: #11809c;
    --cyan-9: #00a2c7;
    --cyan-10: #23afd0;
    --cyan-11: #4ccce6;
    --cyan-12: #b6ecf7;
    --cyan-a1: #0091f70a;
    --cyan-a2: #02a7f211;
    --cyan-a3: #00befd28;
    --cyan-a4: #00baff3b;
    --cyan-a5: #00befd4d;
    --cyan-a6: #00c7fd5e;
    --cyan-a7: #14cdff75;
    --cyan-a8: #11cfff95;
    --cyan-a9: #00cfffc3;
    --cyan-a10: #28d6ffcd;
    --cyan-a11: #52e1fee5;
    --cyan-a12: #bbf3fef7;
    --cyan-surface: #11252d80;
    --cyan-indicator: var(--cyan-9);
    --cyan-track: var(--cyan-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --cyan-1: color(display-p3 0.053 0.085 0.098);
            --cyan-2: color(display-p3 0.072 0.105 0.122);
            --cyan-3: color(display-p3 0.073 0.168 0.209);
            --cyan-4: color(display-p3 0.063 0.216 0.277);
            --cyan-5: color(display-p3 0.091 0.267 0.336);
            --cyan-6: color(display-p3 0.137 0.324 0.4);
            --cyan-7: color(display-p3 0.186 0.398 0.484);
            --cyan-8: color(display-p3 0.23 0.496 0.6);
            --cyan-9: color(display-p3 0.282 0.627 0.765);
            --cyan-10: color(display-p3 0.331 0.675 0.801);
            --cyan-11: color(display-p3 0.446 0.79 0.887);
            --cyan-12: color(display-p3 0.757 0.919 0.962);
            --cyan-a1: color(display-p3 0 0.647 0.992 / 0.034);
            --cyan-a2: color(display-p3 0.133 0.733 1 / 0.059);
            --cyan-a3: color(display-p3 0.122 0.741 0.996 / 0.152);
            --cyan-a4: color(display-p3 0.051 0.725 1 / 0.227);
            --cyan-a5: color(display-p3 0.149 0.757 1 / 0.29);
            --cyan-a6: color(display-p3 0.267 0.792 1 / 0.358);
            --cyan-a7: color(display-p3 0.333 0.808 1 / 0.446);
            --cyan-a8: color(display-p3 0.357 0.816 1 / 0.572);
            --cyan-a9: color(display-p3 0.357 0.82 1 / 0.748);
            --cyan-a10: color(display-p3 0.4 0.839 1 / 0.786);
            --cyan-a11: color(display-p3 0.446 0.79 0.887);
            --cyan-a12: color(display-p3 0.757 0.919 0.962);
            --cyan-surface: color(display-p3 0.0784 0.1412 0.1725 / 0.5);
        }
    }
}
:root {
    --cyan-contrast: white;
}