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

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

:root, .light, .light-theme {
    --brown-1: #fefdfc;
    --brown-2: #fcf9f6;
    --brown-3: #f6eee7;
    --brown-4: #f0e4d9;
    --brown-5: #ebdaca;
    --brown-6: #e4cdb7;
    --brown-7: #dcbc9f;
    --brown-8: #cea37e;
    --brown-9: #ad7f58;
    --brown-10: #a07553;
    --brown-11: #815e46;
    --brown-12: #3e332e;
    --brown-a1: #aa550003;
    --brown-a2: #aa550009;
    --brown-a3: #a04b0018;
    --brown-a4: #9b4a0026;
    --brown-a5: #9f4d0035;
    --brown-a6: #a04e0048;
    --brown-a7: #a34e0060;
    --brown-a8: #9f4a0081;
    --brown-a9: #823c00a7;
    --brown-a10: #723300ac;
    --brown-a11: #522100b9;
    --brown-a12: #140600d1;
    --brown-surface: #fbf8f4cc;
    --brown-indicator: var(--brown-9);
    --brown-track: var(--brown-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        :root, .light, .light-theme {
            --brown-1: color(display-p3 0.995 0.992 0.989);
            --brown-2: color(display-p3 0.987 0.976 0.964);
            --brown-3: color(display-p3 0.959 0.936 0.909);
            --brown-4: color(display-p3 0.934 0.897 0.855);
            --brown-5: color(display-p3 0.909 0.856 0.798);
            --brown-6: color(display-p3 0.88 0.808 0.73);
            --brown-7: color(display-p3 0.841 0.742 0.639);
            --brown-8: color(display-p3 0.782 0.647 0.514);
            --brown-9: color(display-p3 0.651 0.505 0.368);
            --brown-10: color(display-p3 0.601 0.465 0.344);
            --brown-11: color(display-p3 0.485 0.374 0.288);
            --brown-12: color(display-p3 0.236 0.202 0.183);
            --brown-a1: color(display-p3 0.675 0.349 0.024 / 0.012);
            --brown-a2: color(display-p3 0.675 0.349 0.024 / 0.036);
            --brown-a3: color(display-p3 0.573 0.314 0.012 / 0.091);
            --brown-a4: color(display-p3 0.545 0.302 0.008 / 0.146);
            --brown-a5: color(display-p3 0.561 0.29 0.004 / 0.204);
            --brown-a6: color(display-p3 0.553 0.294 0.004 / 0.271);
            --brown-a7: color(display-p3 0.557 0.286 0.004 / 0.361);
            --brown-a8: color(display-p3 0.549 0.275 0.004 / 0.487);
            --brown-a9: color(display-p3 0.447 0.22 0 / 0.632);
            --brown-a10: color(display-p3 0.388 0.188 0 / 0.655);
            --brown-a11: color(display-p3 0.485 0.374 0.288);
            --brown-a12: color(display-p3 0.236 0.202 0.183);
            --brown-surface: color(display-p3 0.9843 0.9725 0.9569 / 0.8);
        }
    }
}
.dark, .dark-theme {
    --brown-1: #12110f;
    --brown-2: #1c1816;
    --brown-3: #28211d;
    --brown-4: #322922;
    --brown-5: #3e3128;
    --brown-6: #4d3c2f;
    --brown-7: #614a39;
    --brown-8: #7c5f46;
    --brown-9: #ad7f58;
    --brown-10: #b88c67;
    --brown-11: #dbb594;
    --brown-12: #f2e1ca;
    --brown-a1: #91110002;
    --brown-a2: #fba67c0c;
    --brown-a3: #fcb58c19;
    --brown-a4: #fbbb8a24;
    --brown-a5: #fcb88931;
    --brown-a6: #fdba8741;
    --brown-a7: #ffbb8856;
    --brown-a8: #ffbe8773;
    --brown-a9: #feb87da8;
    --brown-a10: #ffc18cb3;
    --brown-a11: #fed1aad9;
    --brown-a12: #feecd4f2;
    --brown-surface: #271f1b80;
    --brown-indicator: var(--brown-9);
    --brown-track: var(--brown-9);
}
@supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
        .dark, .dark-theme {
            --brown-1: color(display-p3 0.071 0.067 0.059);
            --brown-2: color(display-p3 0.107 0.095 0.087);
            --brown-3: color(display-p3 0.151 0.13 0.115);
            --brown-4: color(display-p3 0.191 0.161 0.138);
            --brown-5: color(display-p3 0.235 0.194 0.162);
            --brown-6: color(display-p3 0.291 0.237 0.192);
            --brown-7: color(display-p3 0.365 0.295 0.232);
            --brown-8: color(display-p3 0.469 0.377 0.287);
            --brown-9: color(display-p3 0.651 0.505 0.368);
            --brown-10: color(display-p3 0.697 0.557 0.423);
            --brown-11: color(display-p3 0.835 0.715 0.597);
            --brown-12: color(display-p3 0.938 0.885 0.802);
            --brown-a1: color(display-p3 0.855 0.071 0 / 0.005);
            --brown-a2: color(display-p3 0.98 0.706 0.525 / 0.043);
            --brown-a3: color(display-p3 0.996 0.745 0.576 / 0.093);
            --brown-a4: color(display-p3 1 0.765 0.592 / 0.135);
            --brown-a5: color(display-p3 1 0.761 0.588 / 0.181);
            --brown-a6: color(display-p3 1 0.773 0.592 / 0.24);
            --brown-a7: color(display-p3 0.996 0.776 0.58 / 0.32);
            --brown-a8: color(display-p3 1 0.78 0.573 / 0.433);
            --brown-a9: color(display-p3 1 0.769 0.549 / 0.627);
            --brown-a10: color(display-p3 1 0.792 0.596 / 0.677);
            --brown-a11: color(display-p3 0.835 0.715 0.597);
            --brown-a12: color(display-p3 0.938 0.885 0.802);
            --brown-surface: color(display-p3 0.1412 0.1176 0.102 / 0.5);
        }
    }
}
:root {
    --brown-contrast: white;
}