OriaTheme
GitHub

Two layers of color

Base color library

The stable color library provides a selection space; semantic Tokens change with the active theme.

Base colors are not theme colors

@oriatheme/colors supplies 26 stable families with 11 shades each, plus five special colors. They do not change when a theme changes. Semantic Tokens such as primary, surface, foreground, and feedback do respond to the active theme.

Base colors

Stable named scales for choosing from a palette.

Semantic colors

Named by purpose and change with the theme and mode.

The complete Oria color library

26 Tailwind-compatible families with 11 shades each, plus the five special colors inherit, current, transparent, black, and white. Every value comes from @oriatheme/colors and never changes with the theme.

Red--oria-palette-red-*
50oklch(97.10525% 0.014119 22.7613)
100oklch(93.51005% 0.03107 22.6133)
200oklch(87.62799% 0.062165 23.3147)
300oklch(78.98124% 0.11938 23.2268)
400oklch(68.96349% 0.174112 22.7715)
500oklch(58.03678% 0.194044 22.8751)
600oklch(52.07022% 0.189526 23.0258)
700oklch(46.94603% 0.181381 23.1528)
800oklch(41.03603% 0.156616 23.1595)
900oklch(34.89584% 0.133938 23.0695)
950oklch(29.00214% 0.108238 22.9652)
Orange--oria-palette-orange-*
50oklch(96.96998% 0.016213 46.5746)
100oklch(93.43914% 0.034603 47.3998)
200oklch(87.49607% 0.069723 48.8225)
300oklch(78.92771% 0.124572 48.37)
400oklch(68.96961% 0.153022 48.7327)
500oklch(58.08274% 0.156326 48.6252)
600oklch(51.90686% 0.129523 48.5298)
700oklch(46.95933% 0.124348 48.4247)
800oklch(40.98166% 0.107633 48.2455)
900oklch(34.93548% 0.091905 48.2044)
950oklch(28.98955% 0.075033 47.717)
Amber--oria-palette-amber-*
50oklch(96.95414% 0.023675 73.6146)
100oklch(93.45587% 0.052877 74.4667)
200oklch(87.55745% 0.081261 74.9069)
300oklch(79.04028% 0.112326 74.8556)
400oklch(68.93844% 0.13802 75.2858)
500oklch(57.95085% 0.119881 74.8782)
600oklch(51.98991% 0.108235 74.5072)
700oklch(46.97823% 0.095106 75.7625)
800oklch(41.03305% 0.082204 75.2353)
900oklch(34.98931% 0.070462 74.0067)
950oklch(29.15581% 0.057214 75.3653)
Yellow--oria-palette-yellow-*
50oklch(97.07114% 0.031873 97.2894)
100oklch(93.46731% 0.054479 95.8865)
200oklch(87.4294% 0.08399 95.7813)
300oklch(78.98767% 0.115481 95.5512)
400oklch(68.99317% 0.131398 95.7462)
500oklch(58.00087% 0.113686 95.5105)
600oklch(52.04873% 0.102784 95.8011)
700oklch(46.99105% 0.09054 96.0168)
800oklch(41.06171% 0.07838 96.4045)
900oklch(35.01252% 0.067127 96.0316)
950oklch(29.04898% 0.058778 96.461)
Lime--oria-palette-lime-*
50oklch(97.00139% 0.032786 129.6834)
100oklch(93.39498% 0.055313 128.6511)
200oklch(87.57097% 0.087033 129.3427)
300oklch(79.1035% 0.11989 128.9525)
400oklch(68.94413% 0.146711 128.7503)
500oklch(57.94331% 0.150105 128.8565)
600oklch(52.03356% 0.135894 128.9582)
700oklch(47.01045% 0.120029 129.1555)
800oklch(40.91513% 0.102058 128.5675)
900oklch(35.07757% 0.088524 128.9222)
950oklch(29.08047% 0.072068 129.0385)
Green--oria-palette-green-*
50oklch(97.05545% 0.026288 155.9808)
100oklch(93.5091% 0.044543 155.4203)
200oklch(87.49962% 0.068769 155.8087)
300oklch(78.97687% 0.09471 155.9406)
400oklch(69.00808% 0.118168 155.923)
500oklch(57.87842% 0.130139 155.9051)
600oklch(51.91335% 0.117253 155.99)
700oklch(47.0629% 0.112919 156.0788)
800oklch(40.89528% 0.096685 156.0936)
900oklch(35.05366% 0.083653 155.6575)
950oklch(29.02558% 0.068266 155.5015)
Emerald--oria-palette-emerald-*
50oklch(97.06584% 0.024749 164.4579)
100oklch(93.46778% 0.042258 166.1198)
200oklch(87.42916% 0.065472 166.2692)
300oklch(78.91668% 0.089736 165.9127)
400oklch(68.98716% 0.110579 166.3996)
500oklch(57.96971% 0.11313 166.3127)
600oklch(51.93736% 0.10245 166.0389)
700oklch(47.11856% 0.091101 165.8257)
800oklch(40.86472% 0.083657 166.7067)
900oklch(34.96664% 0.072075 166.5347)
950oklch(28.91947% 0.057652 167.0662)
Teal--oria-palette-teal-*
50oklch(97.05997% 0.020077 189.2263)
100oklch(93.56894% 0.035727 187.9144)
200oklch(87.44838% 0.054984 187.606)
300oklch(79.08757% 0.075702 187.1857)
400oklch(69.04603% 0.092428 187.9748)
500oklch(58.00183% 0.094372 188.3686)
600oklch(51.8708% 0.084908 188.4884)
700oklch(46.94347% 0.075155 188.7538)
800oklch(40.87905% 0.070101 187.9397)
900oklch(34.8647% 0.060141 188.1294)
950oklch(29.00523% 0.049031 188.4145)
Cyan--oria-palette-cyan-*
50oklch(97.06271% 0.020583 219.682)
100oklch(93.48152% 0.0375 219.8943)
200oklch(87.62416% 0.058293 219.902)
300oklch(78.98604% 0.081051 220.6161)
400oklch(68.93392% 0.099816 221.5317)
500oklch(58.10012% 0.101628 219.9695)
600oklch(51.8799% 0.092129 221.4072)
700oklch(47.07766% 0.081238 220.9767)
800oklch(41.09222% 0.069907 220.5414)
900oklch(34.87019% 0.059891 220.8978)
950oklch(29.03947% 0.052772 221.6267)
Sky--oria-palette-sky-*
50oklch(97.02483% 0.015868 239.1006)
100oklch(93.44061% 0.033577 239.8425)
200oklch(87.4159% 0.066631 241.1147)
300oklch(79.11049% 0.092713 240.6705)
400oklch(69.02262% 0.11398 240.547)
500oklch(57.95553% 0.126238 240.5335)
600oklch(52.0883% 0.114112 240.5961)
700oklch(47.1061% 0.100994 240.8243)
800oklch(40.86676% 0.094698 240.969)
900oklch(35.06476% 0.080435 240.0845)
950oklch(29.09222% 0.064408 239.6977)
Blue--oria-palette-blue-*
50oklch(96.89675% 0.013175 262.3795)
100oklch(93.44878% 0.028362 261.4776)
200oklch(87.52474% 0.057921 261.3663)
300oklch(78.8991% 0.101942 260.8927)
400oklch(69.01642% 0.161252 260.743)
500oklch(58.06121% 0.178418 260.5508)
600oklch(51.94454% 0.176365 260.6774)
700oklch(47.05384% 0.167944 260.5847)
800oklch(41.05333% 0.15791 260.7173)
900oklch(34.90174% 0.14752 260.8427)
950oklch(28.9361% 0.119549 260.988)
Indigo--oria-palette-indigo-*
50oklch(97.07573% 0.013726 272.6935)
100oklch(93.45583% 0.030044 277.5964)
200oklch(87.47535% 0.060108 276.81)
300oklch(79.02733% 0.104941 275.9665)
400oklch(68.9161% 0.152642 276.2464)
500oklch(57.87161% 0.170029 276.2778)
600oklch(52.10248% 0.165565 276.2226)
700oklch(47.14069% 0.159158 276.2988)
800oklch(40.95616% 0.150072 276.5738)
900oklch(35.05594% 0.139449 275.9519)
950oklch(28.99208% 0.122294 276.1983)
Violet--oria-palette-violet-*
50oklch(97.07859% 0.01331 290.7545)
100oklch(93.44607% 0.032395 291.5015)
200oklch(87.41856% 0.063328 291.0081)
300oklch(78.99341% 0.111352 290.5776)
400oklch(68.99816% 0.162271 290.8847)
500oklch(57.98699% 0.180291 290.5213)
600oklch(51.96159% 0.177172 290.4997)
700oklch(46.91154% 0.170815 290.4981)
800oklch(41.00334% 0.159103 290.5878)
900oklch(35.03266% 0.148009 290.2682)
950oklch(28.99324% 0.12975 290.8196)
Purple--oria-palette-purple-*
50oklch(96.92275% 0.017075 308.2649)
100oklch(93.60981% 0.036958 306.4133)
200oklch(87.61077% 0.074049 307.0993)
300oklch(79.00039% 0.132914 307.05)
400oklch(69.04382% 0.16241 306.9979)
500oklch(58.0962% 0.18039 307.0833)
600oklch(52.03109% 0.177828 306.8682)
700oklch(46.98785% 0.169565 306.9699)
800oklch(40.99393% 0.159373 306.7012)
900oklch(35.02104% 0.148345 306.8432)
950oklch(29.0666% 0.130235 307.3433)
Fuchsia--oria-palette-fuchsia-*
50oklch(96.92481% 0.020784 332.856)
100oklch(93.53929% 0.04956 333.238)
200oklch(87.56358% 0.099749 332.4834)
300oklch(79.03138% 0.151705 332.4248)
400oklch(68.9922% 0.185355 332.2424)
500oklch(58.07526% 0.205767 332.6057)
600oklch(51.93995% 0.201616 332.3592)
700oklch(47.06769% 0.19402 332.4151)
800oklch(40.95461% 0.181694 332.2035)
900oklch(34.94666% 0.155691 331.9972)
950oklch(29.04331% 0.126465 332.3235)
Pink--oria-palette-pink-*
50oklch(96.94444% 0.014911 356.6158)
100oklch(93.49636% 0.03644 356.3471)
200oklch(87.55047% 0.071778 356.4999)
300oklch(79.01951% 0.1272 356.1206)
400oklch(68.9578% 0.171475 355.7882)
500oklch(58.05587% 0.191255 356.0315)
600oklch(51.93802% 0.186545 356.0717)
700oklch(47.06517% 0.179842 356.0945)
800oklch(41.09685% 0.154624 356.1734)
900oklch(34.89985% 0.132656 355.5276)
950oklch(29.00441% 0.115988 356.1265)
Rose--oria-palette-rose-*
50oklch(96.86077% 0.014083 12.0149)
100oklch(93.48857% 0.033203 13.1735)
200oklch(87.54508% 0.06545 12.6161)
300oklch(78.96934% 0.11782 12.2005)
400oklch(68.88094% 0.157581 12.4117)
500oklch(58.05438% 0.174911 12.67)
600oklch(51.92851% 0.170935 12.4667)
700oklch(47.05644% 0.164669 12.9039)
800oklch(41.06934% 0.154049 12.9366)
900oklch(35.08468% 0.13231 12.5499)
950oklch(29.05168% 0.107121 12.7542)
Slate--oria-palette-slate-*
50oklch(96.94799% 0.004541 258.3246)
100oklch(93.54346% 0.00801 253.855)
200oklch(87.41378% 0.014012 258.348)
300oklch(78.95022% 0.01919 258.3596)
400oklch(69.00487% 0.023007 259.1925)
500oklch(57.94283% 0.024623 256.7759)
600oklch(52.04452% 0.023928 255.0107)
700oklch(47.13519% 0.022497 255.628)
800oklch(41.02739% 0.022679 258.3715)
900oklch(34.98259% 0.019879 257.2652)
950oklch(29.0677% 0.016931 255.6564)
Gray--oria-palette-gray-*
50oklch(96.94799% 0.004541 258.3246)
100oklch(93.42193% 0.008358 271.325)
200oklch(87.53582% 0.011819 264.5049)
300oklch(79.072% 0.016921 262.7405)
400oklch(68.91427% 0.021636 267.2102)
500oklch(57.87969% 0.024504 265.6374)
600oklch(51.97747% 0.023717 264.3449)
700oklch(47.06655% 0.022353 265.7979)
800oklch(40.9142% 0.021146 267.5085)
900oklch(35.0703% 0.019257 260.663)
950oklch(28.8939% 0.017441 266.3516)
Zinc--oria-palette-zinc-*
50oklch(97.07138% 0.00265 286.3504)
100oklch(93.5168% 0.005355 286.2957)
200oklch(87.47758% 0.008175 286.2295)
300oklch(79.10312% 0.009787 286.1739)
400oklch(68.90646% 0.013045 286.0524)
500oklch(57.90919% 0.013637 285.9662)
600oklch(52.03953% 0.014016 285.9027)
700oklch(47.04217% 0.012777 285.8984)
800oklch(41.16754% 0.011561 285.881)
900oklch(35.07448% 0.010317 285.8559)
950oklch(29.10806% 0.00901 285.8267)
Neutral--oria-palette-neutral-*
50oklch(97.01508% 0 0)
100oklch(93.40252% 0 0)
200oklch(87.60963% 0 0)
300oklch(78.89206% 0 0)
400oklch(68.94879% 0 0)
500oklch(57.95099% 0 0)
600oklch(52.08065% 0 0)
700oklch(47.11943% 0 0)
800oklch(40.912% 0 0)
900oklch(34.84597% 0 0)
950oklch(28.908% 0 0)
Stone--oria-palette-stone-*
50oklch(97.03582% 0.002866 84.559)
100oklch(93.57885% 0.004226 56.3722)
200oklch(87.53301% 0.006032 59.6405)
300oklch(78.95039% 0.008833 56.2792)
400oklch(69.06842% 0.010974 58.1414)
500oklch(58.08023% 0.011466 58.0879)
600oklch(51.89724% 0.010853 51.9554)
700oklch(46.93465% 0.011138 51.9198)
800oklch(40.99558% 0.010434 56.083)
900oklch(34.86556% 0.008712 53.2078)
950oklch(28.93476% 0.009141 53.1224)
Mauve--oria-palette-mauve-*
50oklch(96.92474% 0.003382 325.603)
100oklch(93.52421% 0.006826 325.6313)
200oklch(87.61501% 0.009398 330.9659)
300oklch(79.12474% 0.013193 329.6053)
400oklch(69.01652% 0.016577 325.7552)
500oklch(57.9402% 0.021166 325.8466)
600oklch(51.94512% 0.019774 325.8578)
700oklch(46.85167% 0.018261 325.8644)
800oklch(40.87437% 0.016795 325.8797)
900oklch(35.05578% 0.01527 325.8975)
950oklch(28.98392% 0.013725 325.9248)
Olive--oria-palette-olive-*
50oklch(96.93165% 0.00397 106.4733)
100oklch(93.46088% 0.008064 114.2264)
200oklch(87.48102% 0.013694 115.8655)
300oklch(78.99433% 0.018133 113.9091)
400oklch(69.0026% 0.021545 113.1259)
500oklch(57.89968% 0.024075 115.779)
600oklch(52.03333% 0.024677 115.8871)
700oklch(47.10441% 0.023734 116.5034)
800oklch(41.02674% 0.022715 114.0092)
900oklch(35.03268% 0.020291 115.1408)
950oklch(28.87173% 0.017592 112.1398)
Mist--oria-palette-mist-*
50oklch(97.04019% 0.004473 214.3284)
100oklch(93.50472% 0.007627 207.1404)
200oklch(87.51772% 0.011206 211.0377)
300oklch(78.9196% 0.015023 213.1101)
400oklch(69.08299% 0.018701 210.1939)
500oklch(58.06607% 0.020912 213.4927)
600oklch(51.94039% 0.020293 214.5028)
700oklch(47.06715% 0.019586 215.6341)
800oklch(40.91927% 0.01847 212.1122)
900oklch(34.95863% 0.017833 213.2948)
950oklch(28.90101% 0.01483 217.9282)
Taupe--oria-palette-taupe-*
50oklch(96.91775% 0.003492 39.4844)
100oklch(93.38249% 0.004548 34.3092)
200oklch(87.38578% 0.007815 48.6417)
300oklch(79.11695% 0.010701 48.5877)
400oklch(69.00484% 0.013877 48.5126)
500oklch(58.01727% 0.014518 48.4582)
600oklch(52.05792% 0.013842 51.142)
700oklch(47.10147% 0.014207 51.0987)
800oklch(40.93377% 0.013902 45.5119)
900oklch(35.04695% 0.012014 51.7887)
950oklch(29.04843% 0.010392 48.3435)
Special colorsinherit · current · transparent · black · white
Inheritinherit
Current colorcurrentColor
Transparenttransparent
Blackoklch(0% 0 0)
Whiteoklch(100% 0 0)

Choose colors in the editor

Open Base colors from any color field. Search by family, shade, or hex, then use a stable value for the semantic Token you are editing. The base library itself remains unchanged when you switch themes.

Continue: understand appearance