Playground

This page has been built like a development tool rather than to serve as a functioning webpage. Don't expect the page to lay out sensibly on mobile. If anything doesn't work try clearing your browser cache.

255°
70%
20%
10%
#3d78c2
#68798d
blue
violet
purple
pink
red
orange
gold
yellow
green
aqua
teal
sky
night
earth
grey
50
#010713
#060418
#0d0213
#12020b
#130204
#100401
#0c0601
#080701
#040902
#020905
#010909
#01090d
#05070b
#090704
#070707
950
#ecf3fd
#f1f1fd
#f7effb
#fceef5
#fdeeef
#fdefe9
#fcf0e1
#f6f5d2
#e6f9dd
#dcfbec
#dcf9f8
#e5f5fc
#f0f2f6
#f5f2ee
#f2f2f2
100
#051428
#120d30
#1f0828
#26061a
#28070c
#230d04
#1d1203
#161503
#0c1806
#051810
#041818
#03171e
#10141a
#17130e
#141414
200
#0f2b4d
#281f5b
#3d164c
#491235
#4c151d
#441f0c
#39270a
#2f2c0b
#1e3112
#103225
#0c3131
#0c2f3c
#242c36
#312a20
#2b2b2b
300
#1b4373
#3e3285
#5c2671
#6d2051
#71232f
#673117
#573d15
#484416
#304b20
#1d4d3a
#174b4b
#17495b
#384352
#4b4134
#424242
400
#2a5d9b
#5648b0
#7d3798
#932f6f
#983443
#8b4624
#775520
#635e22
#44672f
#2a6a51
#236868
#23657c
#4f5d6f
#665a49
#5c5c5c
500
#3d78c2
#7064d2
#9d4fbd
#b9448e
#c04959
#b15c33
#986e2d
#807a2f
#59853f
#398869
#318686
#30829e
#68798d
#837561
#777777
600
#5b95df
#8b85e5
#b96fd8
#d962ab
#df6775
#d47649
#ba883c
#9d973e
#70a451
#4aa783
#40a5a4
#42a0c1
#8495aa
#a0907b
#939393
700
#84b2ee
#a8a6ef
#cd96e6
#e88dc2
#ee9098
#eb9771
#daa454
#bbb350
#88c365
#5ec69d
#53c3c3
#5ebde0
#a2b1c3
#bcad98
#afafaf
800
#afcdf5
#c5c5f5
#dfbbf0
#f1b6d6
#f5b8bc
#f5bca3
#f0c281
#d6cf6b
#a3df80
#7ae3b8
#73dfdf
#90d6f2
#c1ccd9
#d4c9b9
#cacaca
900
#d8e7fa
#e2e3fa
#efdef8
#f8dceb
#faddde
#fadfd3
#f9e1c2
#ede9a8
#ccf3b8
#b5f6d9
#b5f3f2
#caecfa
#e0e6ed
#eae4dc
#e5e5e5

CSS Variables

:root {
--color-black: rgb(0, 0, 0);
--color-white: rgb(255, 255, 255);
--color-blue-50: rgb(1, 7, 19);
--color-blue-950: rgb(236, 243, 253);
--color-blue-100: rgb(5, 20, 40);
--color-blue-200: rgb(15, 43, 77);
--color-blue-300: rgb(27, 67, 115);
--color-blue-400: rgb(42, 93, 155);
--color-blue-500: rgb(61, 120, 194);
--color-blue-600: rgb(91, 149, 223);
--color-blue-700: rgb(132, 178, 238);
--color-blue-800: rgb(175, 205, 245);
--color-blue-900: rgb(216, 231, 250);
--color-violet-50: rgb(6, 4, 24);
--color-violet-950: rgb(241, 241, 253);
--color-violet-100: rgb(18, 13, 48);
--color-violet-200: rgb(40, 31, 91);
--color-violet-300: rgb(62, 50, 133);
--color-violet-400: rgb(86, 72, 176);
--color-violet-500: rgb(112, 100, 210);
--color-violet-600: rgb(139, 133, 229);
--color-violet-700: rgb(168, 166, 239);
--color-violet-800: rgb(197, 197, 245);
--color-violet-900: rgb(226, 227, 250);
--color-purple-50: rgb(13, 2, 19);
--color-purple-950: rgb(247, 239, 251);
--color-purple-100: rgb(31, 8, 40);
--color-purple-200: rgb(61, 22, 76);
--color-purple-300: rgb(92, 38, 113);
--color-purple-400: rgb(125, 55, 152);
--color-purple-500: rgb(157, 79, 189);
--color-purple-600: rgb(185, 111, 216);
--color-purple-700: rgb(205, 150, 230);
--color-purple-800: rgb(223, 187, 240);
--color-purple-900: rgb(239, 222, 248);
--color-pink-50: rgb(18, 2, 11);
--color-pink-950: rgb(252, 238, 245);
--color-pink-100: rgb(38, 6, 26);
--color-pink-200: rgb(73, 18, 53);
--color-pink-300: rgb(109, 32, 81);
--color-pink-400: rgb(147, 47, 111);
--color-pink-500: rgb(185, 68, 142);
--color-pink-600: rgb(217, 98, 171);
--color-pink-700: rgb(232, 141, 194);
--color-pink-800: rgb(241, 182, 214);
--color-pink-900: rgb(248, 220, 235);
--color-red-50: rgb(19, 2, 4);
--color-red-950: rgb(253, 238, 239);
--color-red-100: rgb(40, 7, 12);
--color-red-200: rgb(76, 21, 29);
--color-red-300: rgb(113, 35, 47);
--color-red-400: rgb(152, 52, 67);
--color-red-500: rgb(192, 73, 89);
--color-red-600: rgb(223, 103, 117);
--color-red-700: rgb(238, 144, 152);
--color-red-800: rgb(245, 184, 188);
--color-red-900: rgb(250, 221, 222);
--color-orange-50: rgb(16, 4, 1);
--color-orange-950: rgb(253, 239, 233);
--color-orange-100: rgb(35, 13, 4);
--color-orange-200: rgb(68, 31, 12);
--color-orange-300: rgb(103, 49, 23);
--color-orange-400: rgb(139, 70, 36);
--color-orange-500: rgb(177, 92, 51);
--color-orange-600: rgb(212, 118, 73);
--color-orange-700: rgb(235, 151, 113);
--color-orange-800: rgb(245, 188, 163);
--color-orange-900: rgb(250, 223, 211);
--color-gold-50: rgb(12, 6, 1);
--color-gold-950: rgb(252, 240, 225);
--color-gold-100: rgb(29, 18, 3);
--color-gold-200: rgb(57, 39, 10);
--color-gold-300: rgb(87, 61, 21);
--color-gold-400: rgb(119, 85, 32);
--color-gold-500: rgb(152, 110, 45);
--color-gold-600: rgb(186, 136, 60);
--color-gold-700: rgb(218, 164, 84);
--color-gold-800: rgb(240, 194, 129);
--color-gold-900: rgb(249, 225, 194);
--color-yellow-50: rgb(8, 7, 1);
--color-yellow-950: rgb(246, 245, 210);
--color-yellow-100: rgb(22, 21, 3);
--color-yellow-200: rgb(47, 44, 11);
--color-yellow-300: rgb(72, 68, 22);
--color-yellow-400: rgb(99, 94, 34);
--color-yellow-500: rgb(128, 122, 47);
--color-yellow-600: rgb(157, 151, 62);
--color-yellow-700: rgb(187, 179, 80);
--color-yellow-800: rgb(214, 207, 107);
--color-yellow-900: rgb(237, 233, 168);
--color-green-50: rgb(4, 9, 2);
--color-green-950: rgb(230, 249, 221);
--color-green-100: rgb(12, 24, 6);
--color-green-200: rgb(30, 49, 18);
--color-green-300: rgb(48, 75, 32);
--color-green-400: rgb(68, 103, 47);
--color-green-500: rgb(89, 133, 63);
--color-green-600: rgb(112, 164, 81);
--color-green-700: rgb(136, 195, 101);
--color-green-800: rgb(163, 223, 128);
--color-green-900: rgb(204, 243, 184);
--color-aqua-50: rgb(2, 9, 5);
--color-aqua-950: rgb(220, 251, 236);
--color-aqua-100: rgb(5, 24, 16);
--color-aqua-200: rgb(16, 50, 37);
--color-aqua-300: rgb(29, 77, 58);
--color-aqua-400: rgb(42, 106, 81);
--color-aqua-500: rgb(57, 136, 105);
--color-aqua-600: rgb(74, 167, 131);
--color-aqua-700: rgb(94, 198, 157);
--color-aqua-800: rgb(122, 227, 184);
--color-aqua-900: rgb(181, 246, 217);
--color-teal-50: rgb(1, 9, 9);
--color-teal-950: rgb(220, 249, 248);
--color-teal-100: rgb(4, 24, 24);
--color-teal-200: rgb(12, 49, 49);
--color-teal-300: rgb(23, 75, 75);
--color-teal-400: rgb(35, 104, 104);
--color-teal-500: rgb(49, 134, 134);
--color-teal-600: rgb(64, 165, 164);
--color-teal-700: rgb(83, 195, 195);
--color-teal-800: rgb(115, 223, 223);
--color-teal-900: rgb(181, 243, 242);
--color-sky-50: rgb(1, 9, 13);
--color-sky-950: rgb(229, 245, 252);
--color-sky-100: rgb(3, 23, 30);
--color-sky-200: rgb(12, 47, 60);
--color-sky-300: rgb(23, 73, 91);
--color-sky-400: rgb(35, 101, 124);
--color-sky-500: rgb(48, 130, 158);
--color-sky-600: rgb(66, 160, 193);
--color-sky-700: rgb(94, 189, 224);
--color-sky-800: rgb(144, 214, 242);
--color-sky-900: rgb(202, 236, 250);
--color-night-50: rgb(5, 7, 11);
--color-night-950: rgb(240, 242, 246);
--color-night-100: rgb(16, 20, 26);
--color-night-200: rgb(36, 44, 54);
--color-night-300: rgb(56, 67, 82);
--color-night-400: rgb(79, 93, 111);
--color-night-500: rgb(104, 121, 141);
--color-night-600: rgb(132, 149, 170);
--color-night-700: rgb(162, 177, 195);
--color-night-800: rgb(193, 204, 217);
--color-night-900: rgb(224, 230, 237);
--color-earth-50: rgb(9, 7, 4);
--color-earth-950: rgb(245, 242, 238);
--color-earth-100: rgb(23, 19, 14);
--color-earth-200: rgb(49, 42, 32);
--color-earth-300: rgb(75, 65, 52);
--color-earth-400: rgb(102, 90, 73);
--color-earth-500: rgb(131, 117, 97);
--color-earth-600: rgb(160, 144, 123);
--color-earth-700: rgb(188, 173, 152);
--color-earth-800: rgb(212, 201, 185);
--color-earth-900: rgb(234, 228, 220);
--color-grey-50: rgb(7, 7, 7);
--color-grey-950: rgb(242, 242, 242);
--color-grey-100: rgb(20, 20, 20);
--color-grey-200: rgb(43, 43, 43);
--color-grey-300: rgb(66, 66, 66);
--color-grey-400: rgb(92, 92, 92);
--color-grey-500: rgb(119, 119, 119);
--color-grey-600: rgb(147, 147, 147);
--color-grey-700: rgb(175, 175, 175);
--color-grey-800: rgb(202, 202, 202);
--color-grey-900: rgb(229, 229, 229);
}

@media (color-gamut: p3) {
:root {
--color-black: rgb(0, 0, 0);
--color-white: rgb(255, 255, 255);
--color-blue-50: color(display-p3 0.009453301040142616 0.027226597670547695 0.07238422877105527);
--color-blue-950: color(display-p3 0.9290764036870848 0.9518363977611103 0.9867846001031407);
--color-blue-100: color(display-p3 0.030650394972974754 0.07708514963246049 0.1528427807667268);
--color-blue-200: color(display-p3 0.08770797749535125 0.16640029251502877 0.29309063912229033);
--color-blue-300: color(display-p3 0.14787190141814335 0.2586646215206289 0.43701986600170517);
--color-blue-400: color(display-p3 0.2151166466908685 0.35832288184898076 0.588788869709944);
--color-blue-500: color(display-p3 0.29611687228604994 0.46544033910410726 0.7375766635512033);
--color-blue-600: color(display-p3 0.40845692170875286 0.5790224976926904 0.8515155685406859);
--color-blue-700: color(display-p3 0.5547794054425658 0.6933789809282791 0.9118769522394987);
--color-blue-800: color(display-p3 0.7087595844477919 0.8016896870699909 0.946218036682238);
--color-blue-900: color(display-p3 0.8572615338685087 0.9030690325557584 0.9736356414088313);
--color-violet-50: color(display-p3 0.022889522670334506 0.015809167635589687 0.09031331187728117);
--color-violet-950: color(display-p3 0.9441505298092774 0.9450164172297145 0.9867465293129999);
--color-violet-100: color(display-p3 0.06787221048857037 0.050356554452168724 0.1820484210012563);
--color-violet-200: color(display-p3 0.1509594003446363 0.12193620458787466 0.34156981819436305);
--color-violet-300: color(display-p3 0.23682257609534973 0.19723581168085658 0.5033052460788996);
--color-violet-400: color(display-p3 0.3297796333133421 0.2838441110747301 0.665577964646969);
--color-violet-500: color(display-p3 0.43109621656701047 0.3930419265512895 0.7952986740007281);
--color-violet-600: color(display-p3 0.5413257064222906 0.5208707227700958 0.8722500735032471);
--color-violet-700: color(display-p3 0.65739068749787 0.6505256122549111 0.9155706629564705);
--color-violet-800: color(display-p3 0.774055077550532 0.7736623153510666 0.9464805144366083);
--color-violet-900: color(display-p3 0.8881234344176009 0.8893304781960815 0.9735853391585517);
--color-purple-50: color(display-p3 0.045618603617833535 0.010761341541960893 0.0706682327541045);
--color-purple-950: color(display-p3 0.9634661977514437 0.9368559883491083 0.9818012457181969);
--color-purple-100: color(display-p3 0.10917955415046773 0.034909664088808356 0.15002840051164615);
--color-purple-200: color(display-p3 0.22001552708060707 0.09578915011615166 0.2882782871193991);
--color-purple-300: color(display-p3 0.33391902174189997 0.15987030001617902 0.42981956048217496);
--color-purple-400: color(display-p3 0.45466357511286765 0.23302287055026621 0.5777831301453479);
--color-purple-500: color(display-p3 0.5761389212835482 0.3248091253417685 0.7189800340142746);
--color-purple-600: color(display-p3 0.6837230606735365 0.450039066525822 0.8230210025159442);
--color-purple-700: color(display-p3 0.7725834369613801 0.5959995838589629 0.8837306086185531);
--color-purple-800: color(display-p3 0.8519811404540368 0.7387730952454769 0.9264013012556371);
--color-purple-900: color(display-p3 0.9268747873425226 0.8726913421213882 0.9636951077489581);
--color-pink-50: color(display-p3 0.060735154679606364 0.009191273883371275 0.03960278138229238);
--color-pink-950: color(display-p3 0.9771386480673675 0.934347518080814 0.9585878146209447);
--color-pink-100: color(display-p3 0.1338388113893807 0.029816971686845013 0.09938552495814415);
--color-pink-200: color(display-p3 0.2612943804101119 0.086182295863872 0.20366373206702987);
--color-pink-300: color(display-p3 0.39225950471407406 0.14600224954764457 0.3110372126485292);
--color-pink-400: color(display-p3 0.5311847645056205 0.21345000178965562 0.4257464824723465);
--color-pink-500: color(display-p3 0.6710176391586622 0.2960344624967923 0.5443404780694674);
--color-pink-600: color(display-p3 0.7919114215886441 0.4098398234441566 0.6571260993870511);
--color-pink-700: color(display-p3 0.8606185281436849 0.5695090812752037 0.7495385224209081);
--color-pink-800: color(display-p3 0.9098824959388939 0.7248280285579993 0.8346380394768697);
--color-pink-900: color(display-p3 0.9547212275594642 0.8671465493768925 0.9174365984391047);
--color-red-50: color(display-p3 0.06482831186378188 0.010902885187704377 0.015053848238394108);
--color-red-950: color(display-p3 0.9810794158149457 0.9361099917463414 0.9369514075923449);
--color-red-100: color(display-p3 0.14051883518829297 0.03535480347657472 0.048202244950117414);
--color-red-200: color(display-p3 0.2724926389356651 0.09647144299650812 0.11807640935495778);
--color-red-300: color(display-p3 0.4081321516675947 0.16031024574900307 0.19050951298504162);
--color-red-400: color(display-p3 0.5521345418404306 0.23132241322356722 0.2696289833658923);
--color-red-500: color(display-p3 0.6974124840276894 0.31520766017917057 0.3580726017079546);
--color-red-600: color(display-p3 0.8166105162518653 0.43130869676103495 0.46639043480117554);
--color-red-700: color(display-p3 0.8825550569629829 0.5833366109338182 0.601297032087063);
--color-red-800: color(display-p3 0.9253790113498023 0.7328783954163248 0.7401412451281323);
--color-red-900: color(display-p3 0.9625639422760878 0.8708062771681198 0.8729803402214871);
--color-orange-50: color(display-p3 0.056298159181283565 0.01733163744204503 0.006220552276394584);
--color-orange-950: color(display-p3 0.9812634470741363 0.939216357175059 0.917538616252729);
--color-orange-100: color(display-p3 0.12661087841038407 0.0544371727269271 0.020174514586057197);
--color-orange-200: color(display-p3 0.24926687910533113 0.1284954757236823 0.06491408568797333);
--color-orange-300: color(display-p3 0.37556987367524974 0.2051309314790689 0.11544486055345984);
--color-orange-400: color(display-p3 0.5106426333335712 0.288273393194075 0.17139887647586213);
--color-orange-500: color(display-p3 0.6509281711057651 0.3789463047419979 0.23643988558145496);
--color-orange-600: color(display-p3 0.7836463784779901 0.4811143312086858 0.3237736517091562);
--color-orange-700: color(display-p3 0.8749404466315105 0.6080807393152012 0.4705854739224608);
--color-orange-800: color(display-p3 0.924847439039153 0.7464553247164916 0.6545752124528725);
--color-orange-900: color(display-p3 0.9628355112869557 0.8771438244343889 0.8329562025964485);
--color-gold-50: color(display-p3 0.043271476587563286 0.02409992666814936 0.005788778111237148);
--color-gold-950: color(display-p3 0.9806037821432904 0.9441344535952098 0.888423354321652);
--color-gold-100: color(display-p3 0.1053629693574934 0.07053877464415442 0.01877029854332578);
--color-gold-200: color(display-p3 0.2137197509271901 0.1554196377475249 0.061319669653252244);
--color-gold-300: color(display-p3 0.325446285674563 0.24305973162253636 0.11014528612069543);
--color-gold-400: color(display-p3 0.44546729046853645 0.33750424061001494 0.16349349276617203);
--color-gold-500: color(display-p3 0.5723367142242689 0.4381392675643915 0.22228448116420418);
--color-gold-600: color(display-p3 0.7014911184162262 0.5430441673620127 0.28938760129644164);
--color-gold-700: color(display-p3 0.8234029091164552 0.6513346617534213 0.37920057494480064);
--color-gold-800: color(display-p3 0.9128949813156413 0.7672205266815934 0.542333531726411);
--color-gold-900: color(display-p3 0.9610636690355884 0.8868230918788019 0.7735123666300008);
--color-yellow-50: color(display-p3 0.031716622099359194 0.02928848381731616 0.006252921103664632);
--color-yellow-950: color(display-p3 0.9642347311395972 0.9592451427660819 0.8379900849977234);
--color-yellow-100: color(display-p3 0.08575177827548949 0.08115969237726361 0.020273594679035854);
--color-yellow-200: color(display-p3 0.18088316762965084 0.17319944152604452 0.06509941745492762);
--color-yellow-300: color(display-p3 0.27903044226096774 0.2681826441822164 0.11546169474774251);
--color-yellow-400: color(display-p3 0.3846118156212981 0.37042034012468344 0.17034891417290496);
--color-yellow-500: color(display-p3 0.4966381421226563 0.47904143272557503 0.23026947850519625);
--color-yellow-600: color(display-p3 0.6120929966627869 0.5913266239270851 0.29602262571654037);
--color-yellow-700: color(display-p3 0.7269721536991387 0.703904288801028 0.37143451828583124);
--color-yellow-800: color(display-p3 0.8359975994108221 0.813437949314501 0.47455907242737344);
--color-yellow-900: color(display-p3 0.9266767079588104 0.914467008474449 0.6869945945330469);
--color-green-50: color(display-p3 0.01854123343898178 0.03485169745332303 0.009303199496447968);
--color-green-950: color(display-p3 0.9170501708776334 0.9748242728996416 0.8755468366210027);
--color-green-100: color(display-p3 0.05755080602378219 0.09138845604689796 0.03015598813369931);
--color-green-200: color(display-p3 0.13367698626998498 0.19032208150939187 0.0866610350088936);
--color-green-300: color(display-p3 0.21233380222037207 0.2923762427291642 0.14593860280013118);
--color-green-400: color(display-p3 0.2972237926893498 0.402123062784279 0.21031399395093875);
--color-green-500: color(display-p3 0.3879495724673215 0.5184801897088142 0.2800575022460654);
--color-green-600: color(display-p3 0.4830109612006393 0.6381859530374338 0.35534144567807896);
--color-green-700: color(display-p3 0.5815035985905312 0.7567645494072904 0.43866387277343766);
--color-green-800: color(display-p3 0.6873111464012479 0.8676509475071955 0.5435600136692283);
--color-green-900: color(display-p3 0.8305974952679155 0.9488910107812923 0.7422672237935205);
--color-aqua-50: color(display-p3 0.01146487485727146 0.0360426180439109 0.02219816992259463);
--color-aqua-950: color(display-p3 0.8855130405982463 0.9799582011042395 0.9285903349004507);
--color-aqua-100: color(display-p3 0.0371558082074517 0.09345235261455706 0.06631222291896952);
--color-aqua-200: color(display-p3 0.09949385801290953 0.19378097757844273 0.14833681090868);
--color-aqua-300: color(display-p3 0.16403326611870736 0.2972744287504451 0.2330297595081084);
--color-aqua-400: color(display-p3 0.2339290998799467 0.4085695011896349 0.32429774941628664);
--color-aqua-500: color(display-p3 0.30920410339409177 0.5265681836077358 0.421518772194964);
--color-aqua-600: color(display-p3 0.3894446775354046 0.6479568812092386 0.5226348837153161);
--color-aqua-700: color(display-p3 0.47602448932222224 0.7681488585377648 0.625606581619215);
--color-aqua-800: color(display-p3 0.5800714978161611 0.8800464483394662 0.7312167171877737);
--color-aqua-900: color(display-p3 0.7644151277681367 0.9581286260928205 0.856499604638754);
--color-teal-50: color(display-p3 0.009878430812440647 0.03465419569873599 0.03510386876022964);
--color-teal-950: color(display-p3 0.8857543133502134 0.9728424538218757 0.972198363764002);
--color-teal-100: color(display-p3 0.032015734174012066 0.09104334755033891 0.0918294317170778);
--color-teal-200: color(display-p3 0.09020870144226459 0.18974970384836273 0.19106409971168076);
--color-teal-300: color(display-p3 0.15089237391251475 0.2915819104045444 0.29343500509820997);
--color-teal-400: color(display-p3 0.21665847960386614 0.4011185262504581 0.40353606181148005);
--color-teal-500: color(display-p3 0.2876143674968398 0.517315913671901 0.5202959161650159);
--color-teal-600: color(display-p3 0.3636707782186042 0.6369806471526719 0.6404494797471645);
--color-teal-700: color(display-p3 0.4475442573855329 0.7556369018683868 0.759337769049506);
--color-teal-800: color(display-p3 0.5582660664122854 0.8655992659814595 0.8685811787286157);
--color-teal-900: color(display-p3 0.7606173282495694 0.9456377910828736 0.9456988519902344);
--color-sky-50: color(display-p3 0.009336150166053077 0.0324644156157406 0.0491028340722618);
--color-sky-950: color(display-p3 0.9098619132077733 0.9603385479388215 0.9862978627681843);
--color-sky-100: color(display-p3 0.030260930794249234 0.08712579599732956 0.11487696171942913);
--color-sky-200: color(display-p3 0.08685683881339143 0.18318925090811441 0.2296517501035193);
--color-sky-300: color(display-p3 0.14620479009813286 0.28230377856271227 0.3479685090711461);
--color-sky-400: color(display-p3 0.21071192685956636 0.3889312505777211 0.47498046892800533);
--color-sky-500: color(display-p3 0.2810916106608273 0.502039388768618 0.6089000474948987);
--color-sky-600: color(display-p3 0.36019007344296045 0.6183040855028448 0.743707936747554);
--color-sky-700: color(display-p3 0.46345508939676444 0.732023650215843 0.8642156432490414);
--color-sky-800: color(display-p3 0.6257840300150789 0.8331792157694511 0.9378039731360341);
--color-sky-900: color(display-p3 0.8172376631241585 0.9198600357201846 0.9724567908993366);
--color-night-50: color(display-p3 0.021418923542070145 0.028231446690825803 0.0410576695186596);
--color-night-950: color(display-p3 0.9418988439338378 0.9501850606375565 0.9628883234387141);
--color-night-100: color(display-p3 0.06455761429599491 0.07908875514399613 0.10168771517676053);
--color-night-200: color(display-p3 0.14560068561587716 0.16972082574084474 0.20722605068500632);
--color-night-300: color(display-p3 0.22971349010960596 0.2632340561674241 0.3153385758676309);
--color-night-400: color(display-p3 0.3213663649424368 0.3638456565209417 0.4298319638135564);
--color-night-500: color(display-p3 0.4213103455131943 0.47062275814201565 0.5471262930213642);
--color-night-600: color(display-p3 0.5299560454949526 0.5807035170015177 0.6592549479908643);
--color-night-700: color(display-p3 0.6461957204113085 0.690579250277491 0.7590668235666689);
--color-night-800: color(display-p3 0.7654800917172142 0.7974183992193797 0.8465508810190849);
--color-night-900: color(display-p3 0.8836345487552472 0.9000939511012095 0.9253518421257886);
--color-earth-50: color(display-p3 0.0334913525353087 0.026573136772669727 0.017758472970435445);
--color-earth-950: color(display-p3 0.9575358766124179 0.9479360248718046 0.9332438799449843);
--color-earth-100: color(display-p3 0.0889552883825532 0.07575756180819326 0.05559984688692957);
--color-earth-200: color(display-p3 0.18611372973222415 0.16418407473025776 0.1306910845879652);
--color-earth-300: color(display-p3 0.28606806713800376 0.2555174703841134 0.2088616610371154);
--color-earth-400: color(display-p3 0.3929633874435753 0.35400128176345885 0.29450813239062595);
--color-earth-500: color(display-p3 0.5050475805294702 0.4590040193593447 0.3887126460287177);
--color-earth-600: color(display-p3 0.6180112480131783 0.5682598362925699 0.49232501542537227);
--color-earth-700: color(display-p3 0.7263640593737068 0.6790028675475764 0.6067179525156013);
--color-earth-800: color(display-p3 0.8252061371780546 0.7887323408052547 0.7330321451415627);
--color-earth-900: color(display-p3 0.9146921752910329 0.8956075093674527 0.8664235149904058);
--color-grey-50: color(display-p3 0.027615102818952297 0.027615104764128377 0.027615110877945395);
--color-grey-950: color(display-p3 0.9491714894541133 0.9491715189260647 0.9491716115583483);
--color-grey-100: color(display-p3 0.07786294688166565 0.07786295078112934 0.0778629630374007);
--color-grey-200: color(display-p3 0.16767624438951761 0.1676762509249585 0.1676762714662796);
--color-grey-300: color(display-p3 0.26036616453790157 0.26036617379374777 0.26036620288547957);
--color-grey-400: color(display-p3 0.3601458289092704 0.3601458410936017 0.3601458793897558);
--color-grey-500: color(display-p3 0.4661807791206471 0.4661807944170521 0.46618084249466313);
--color-grey-600: color(display-p3 0.575856271278127 0.5758562897934555 0.5758563479883536);
--color-grey-700: color(display-p3 0.6859945360978917 0.6859945578457253 0.6859946262006006);
--color-grey-800: color(display-p3 0.7938542537297937 0.7938542786432583 0.7938543569479196);
--color-grey-900: color(display-p3 0.8981344060516098 0.8981344340256464 0.898134521949889);
}
}

@media (color-gamut: rec2020) {
:root {
--color-black: rgb(0, 0, 0);
--color-white: rgb(255, 255, 255);
--color-blue-50: color(rec2020 0.005705046692885518 0.009432887213065873 0.027864637773068242);
--color-blue-950: color(rec2020 0.9287040200150796 0.9452514459815013 0.9845354828100625);
--color-blue-100: color(rec2020 0.018487011199391147 0.030560077370822246 0.08996924701537065);
--color-blue-200: color(rec2020 0.06391649918642162 0.10382366336455401 0.2310339204467654);
--color-blue-300: color(rec2020 0.13704299421183125 0.19659297431543848 0.38073343099714513);
--color-blue-400: color(rec2020 0.2201086673420647 0.29926729240833555 0.5424876848443649);
--color-blue-500: color(rec2020 0.3146780117004872 0.411760155426133 0.7041800738078261);
--color-blue-600: color(rec2020 0.42900069955877185 0.5329078885123477 0.830027150238298);
--color-blue-700: color(rec2020 0.5663178523688902 0.6569232910384337 0.8978900406644598);
--color-blue-800: color(rec2020 0.7123752896042007 0.7764977730754671 0.9373008344333582);
--color-blue-900: color(rec2020 0.8572833663559745 0.8901032656348873 0.9691773100190377);
--color-violet-50: color(rec2020 0.00894103697429594 0.006032461487224365 0.038085372555536845);
--color-violet-950: color(rec2020 0.9398128207245415 0.9388116402615949 0.9843460463339393);
--color-violet-100: color(rec2020 0.02896409053526466 0.019558498392865616 0.11849705303888505);
--color-violet-200: color(rec2020 0.0989485443972013 0.06780617469504766 0.28037752965578366);
--color-violet-300: color(rec2020 0.18936670268307504 0.14443922952997748 0.4500695183884049);
--color-violet-400: color(rec2020 0.2890670141974651 0.23449164123644134 0.6244482930580213);
--color-violet-500: color(rec2020 0.39745947193825915 0.3473652425241257 0.7664621928953773);
--color-violet-600: color(rec2020 0.5136485265108408 0.48020622754200193 0.852126553392874);
--color-violet-700: color(rec2020 0.6353216991759242 0.6174864500270042 0.9013205677878311);
--color-violet-800: color(rec2020 0.7583176133685656 0.7503899782720388 0.9370910100952818);
--color-violet-900: color(rec2020 0.8797290217033839 0.8771831802773339 0.968841523707179);
--color-purple-50: color(rec2020 0.014094587192938074 0.004601531337931932 0.026861149067765575);
--color-purple-950: color(rec2020 0.9540996336202041 0.93114886322805 0.9786963168822411);
--color-purple-100: color(rec2020 0.045647594115815475 0.014921065591129106 0.08685698040001935);
--color-purple-200: color(rec2020 0.14387742909590195 0.051723545019752785 0.22550199120863684);
--color-purple-300: color(rec2020 0.2543706725128292 0.11626699603196405 0.3722805741400739);
--color-purple-400: color(rec2020 0.37476166673269135 0.19481204447738731 0.5295039366105001);
--color-purple-500: color(rec2020 0.4996612778034648 0.29141152512743884 0.6824857832443091);
--color-purple-600: color(rec2020 0.6161491413495398 0.41916106049788004 0.7971504572912149);
--color-purple-700: color(rec2020 0.7192117149681867 0.5687356341840974 0.865392838678678);
--color-purple-800: color(rec2020 0.8154862446964203 0.7184189083706424 0.9142882298830723);
--color-purple-900: color(rec2020 0.908319388187321 0.8616683093140213 0.9575619451873814);
--color-pink-50: color(rec2020 0.018157393342800757 0.004210460411020046 0.013596712722140107);
--color-pink-950: color(rec2020 0.9639849844099813 0.9289044249902434 0.9529747293329784);
--color-pink-100: color(rec2020 0.058801227000399504 0.013652052762303054 0.04403760676824047);
--color-pink-200: color(rec2020 0.17320150373800297 0.047300483460906706 0.14000959608829755);
--color-pink-300: color(rec2020 0.2969770171629299 0.1075611742201607 0.2488960417561601);
--color-pink-400: color(rec2020 0.4318667147149289 0.18189268752648663 0.3681346128230724);
--color-pink-500: color(rec2020 0.5716705000371437 0.27083516276947317 0.49396525026630267);
--color-pink-600: color(rec2020 0.699043333395819 0.38744274514665916 0.6158967773634392);
--color-pink-700: color(rec2020 0.7857881524709489 0.5465002147914793 0.717911560948172);
--color-pink-800: color(rec2020 0.8584631458166966 0.7062913238240426 0.8130645414134283);
--color-pink-900: color(rec2020 0.9286182245558559 0.85674424712604 0.9063791434772197);
--color-red-50: color(rec2020 0.01933619572595907 0.004754230225226851 0.0051946769455335304);
--color-red-950: color(rec2020 0.9666186429613899 0.9306644567066336 0.9291430332354271);
--color-red-100: color(rec2020 0.06261939588940371 0.015411475452076164 0.016835526698234855);
--color-red-200: color(rec2020 0.18103217897955337 0.0533491578125483 0.05823208499903776);
--color-red-300: color(rec2020 0.30838879764388827 0.11885440328091446 0.12742323873502442);
--color-red-400: color(rec2020 0.4472604071315591 0.19642808643554371 0.20730283292493312);
--color-red-500: color(rec2020 0.5913985017615595 0.28707537832573427 0.29857960443474296);
--color-red-600: color(rec2020 0.7172214955548807 0.4063349477965975 0.41289233736660436);
--color-red-700: color(rec2020 0.8016150062251463 0.5594442237819683 0.5582523165087918);
--color-red-800: color(rec2020 0.8693073562488456 0.7141001693908028 0.7102698303440017);
--color-red-900: color(rec2020 0.9339362125857842 0.8603699224008382 0.8576026485984329);
--color-orange-50: color(rec2020 0.016657019443272792 0.006643906275147077 0.0022126874115639458);
--color-orange-950: color(rec2020 0.9664622892503496 0.9336756611675463 0.9078427172581769);
--color-orange-100: color(rec2020 0.05394955482384591 0.021527992529048103 0.007176019318219601);
--color-orange-200: color(rec2020 0.162906730592408 0.07440410567716295 0.024876502852285466);
--color-orange-300: color(rec2020 0.28226451400295033 0.1536141477488986 0.057839136506398284);
--color-orange-400: color(rec2020 0.4132445645218341 0.24171716967297513 0.11119433127376632);
--color-orange-500: color(rec2020 0.552614840329025 0.339160378569798 0.17704204470059903);
--color-orange-600: color(rec2020 0.689124848932899 0.44877234143555844 0.26692949057957693);
--color-orange-700: color(rec2020 0.794250882395562 0.5817669875120008 0.4208943113753242);
--color-orange-800: color(rec2020 0.8678815510086831 0.726844200818348 0.6184470579225518);
--color-orange-900: color(rec2020 0.9335777497885991 0.8664602399619645 0.8139716089863052);
--color-gold-50: color(rec2020 0.013152504997405346 0.008621517945884404 0.00211262755359376);
--color-gold-950: color(rec2020 0.9655351570905251 0.938434889503653 0.8759925236087691);
--color-gold-100: color(rec2020 0.042603603561678104 0.02793096368205642 0.006849910274992691);
--color-gold-200: color(rec2020 0.13651830722626987 0.09575628757709823 0.023722806343367715);
--color-gold-300: color(rec2020 0.24401218995029067 0.18479003160842328 0.05499665688653671);
--color-gold-400: color(rec2020 0.36242145113605306 0.2831071356980756 0.10557883068208321);
--color-gold-500: color(rec2020 0.4902709261822443 0.38992501444331434 0.1655441008219033);
--color-gold-600: color(rec2020 0.6231283228209095 0.5029798986581849 0.23491087626605833);
--color-gold-700: color(rec2020 0.7523767051641 0.6207308926880198 0.3284357146812873);
--color-gold-800: color(rec2020 0.8573762067606218 0.7462639057575718 0.5001298852812238);
--color-gold-900: color(rec2020 0.9314390560458743 0.8757502820577779 0.7495940611168312);
--color-yellow-50: color(rec2020 0.01045696285480486 0.010139662269672695 0.0023083630570349223);
--color-yellow-950: color(rec2020 0.9525027823312233 0.9529066358235991 0.8212682474744247);
--color-yellow-100: color(rec2020 0.03387441318976995 0.03284731646881643 0.007483853678771502);
--color-yellow-200: color(rec2020 0.11342129866010514 0.11050138899885187 0.0259098226829242);
--color-yellow-300: color(rec2020 0.21044563000061028 0.20621378998698864 0.06002160328599525);
--color-yellow-400: color(rec2020 0.3174439722495982 0.3118026517138007 0.11361148411225036);
--color-yellow-500: color(rec2020 0.43332109631914584 0.4262431888806216 0.17518257955937822);
--color-yellow-600: color(rec2020 0.5549002033544724 0.5465308544144979 0.24368238334933967);
--color-yellow-700: color(rec2020 0.6779785871109809 0.6688417923096196 0.3229067879478811);
--color-yellow-800: color(rec2020 0.7975353769190398 0.7893101718171637 0.4315217861116405);
--color-yellow-900: color(rec2020 0.9042717535476668 0.9020245564266756 0.6573324188930856);
--color-green-50: color(rec2020 0.007433010533718924 0.011767839973621658 0.0033930124584782393);
--color-green-950: color(rec2020 0.918101981986507 0.967534501873021 0.8626671964286883);
--color-green-100: color(rec2020 0.02408180465959105 0.038119700252377764 0.010997873543093032);
--color-green-200: color(rec2020 0.08317915971632339 0.12501907365594736 0.0380483212513138);
--color-green-300: color(rec2020 0.16650822805481597 0.2273051258846549 0.08786995364859171);
--color-green-400: color(rec2020 0.25858902828692015 0.34005294227376237 0.153333258986788);
--color-green-500: color(rec2020 0.35875942418271073 0.4620278418325704 0.22561550359735066);
--color-green-600: color(rec2020 0.4649449560603044 0.5896919226780282 0.30478779430160036);
--color-green-700: color(rec2020 0.5751962882654722 0.7181336380254593 0.39327552524358955);
--color-green-800: color(rec2020 0.6910973057731025 0.8403424746117174 0.505073376014635);
--color-green-900: color(rec2020 0.8344798024346912 0.9345008060319622 0.7176464627354355);
--color-aqua-50: color(rec2020 0.005871081910570083 0.012101786455174809 0.007820960616212517);
--color-aqua-950: color(rec2020 0.8961291234416787 0.9722040759933261 0.9209665128027686);
--color-aqua-100: color(rec2020 0.019022954270950028 0.03920147410160147 0.025337786175773862);
--color-aqua-200: color(rec2020 0.06573298525538482 0.127861748009255 0.08739228682424438);
--color-aqua-300: color(rec2020 0.13982996722157648 0.23144438012370705 0.17261807268886514);
--color-aqua-400: color(rec2020 0.22281280328887937 0.34562182997476393 0.2667439207243768);
--color-aqua-500: color(rec2020 0.3133357925943759 0.46914343656211044 0.3690175973630744);
--color-aqua-600: color(rec2020 0.40990823084132477 0.5984209448499546 0.47714726241435823);
--color-aqua-700: color(rec2020 0.5117943721610634 0.7284351663894505 0.5887445759886542);
--color-aqua-800: color(rec2020 0.6245325313334671 0.8516652871099233 0.704319818683016);
--color-aqua-900: color(rec2020 0.790265877025787 0.9429292720964335 0.841689416361949);
--color-teal-50: color(rec2020 0.005572336222058152 0.011677175488345565 0.012234456887333104);
--color-teal-950: color(rec2020 0.8970497341468802 0.9652393672978454 0.96887014960843);
--color-teal-100: color(rec2020 0.018054923309647045 0.03782663921706791 0.03963125259716468);
--color-teal-200: color(rec2020 0.06238736527360935 0.12424671596560466 0.12897919261886465);
--color-teal-300: color(rec2020 0.13427267054951122 0.22619541198490206 0.23307153457353752);
--color-teal-400: color(rec2020 0.2153247497630693 0.3385984174981136 0.3478101927436162);
--color-teal-500: color(rec2020 0.30374985049527686 0.46026149546211204 0.47193265688390107);
--color-teal-600: color(rec2020 0.3981687057974719 0.5877217793799561 0.6017945690278732);
--color-teal-700: color(rec2020 0.49843976459481953 0.7160887439123101 0.7320765159014215);
--color-teal-800: color(rec2020 0.6142987274690914 0.8373367037014411 0.853141292237006);
--color-teal-900: color(rec2020 0.789347919415153 0.9306240710902407 0.9392383581735724);
--color-sky-50: color(rec2020 0.005522238884224478 0.011014190921383447 0.01726137934767807);
--color-sky-950: color(rec2020 0.9146715468072881 0.9533014302390501 0.9841822759284822);
--color-sky-100: color(rec2020 0.01789298136704061 0.03567951800673325 0.05590989255213403);
--color-sky-200: color(rec2020 0.061832777914826206 0.11844936105885334 0.16717649236286963);
--color-sky-300: color(rec2020 0.13335854207370113 0.21776548151831282 0.2885757928533016);
--color-sky-400: color(rec2020 0.21418696063870862 0.327280723553066 0.42213838025606154);
--color-sky-500: color(rec2020 0.3027210791650301 0.44582097444042 0.5657904644214725);
--color-sky-600: color(rec2020 0.3990556952513016 0.5698254140960546 0.7128030629051951);
--color-sky-700: color(rec2020 0.5100428109564112 0.6933131575329701 0.8460641424509103);
--color-sky-800: color(rec2020 0.6572968208312941 0.8061885243809622 0.9285961504421332);
--color-sky-900: color(rec2020 0.8287977893448045 0.9059788816173151 0.9682230796701574);
--color-night-50: color(rec2020 0.00825697970080666 0.009780198816380288 0.014234427906291211);
--color-night-950: color(rec2020 0.9377466596904878 0.9438051661894229 0.9580752634608132);
--color-night-100: color(rec2020 0.026761283948926556 0.031682372854578846 0.046062979246626064);
--color-night-200: color(rec2020 0.09215330209260794 0.10711539047080054 0.14460619285281195);
--color-night-300: color(rec2020 0.17986787126453074 0.2012698181458039 0.25482138765312384);
--color-night-400: color(rec2020 0.2773324830735196 0.305111725363042 0.37442990426717204);
--color-night-500: color(rec2020 0.38461567856170437 0.4175788525369365 0.49940079886663646);
--color-night-600: color(rec2020 0.500896353659946 0.5355723547875327 0.620837257449869);
--color-night-700: color(rec2020 0.6241680604632661 0.6551745319400453 0.730422859894844);
--color-night-800: color(rec2020 0.7502501461160284 0.7730215957316904 0.8275466259121503);
--color-night-900: color(rec2020 0.8755954269470504 0.887537737676735 0.9158043148376365);
--color-earth-50: color(rec2020 0.010925737506598527 0.009327261805594329 0.006232633764156635);
--color-earth-950: color(rec2020 0.9488856081354 0.9418194824890562 0.925329180811937);
--color-earth-100: color(rec2020 0.03538235457801729 0.03021882568962752 0.020217221447736456);
--color-earth-200: color(rec2020 0.11753895824877855 0.10280422682366097 0.07010860873611958);
--color-earth-300: color(rec2020 0.21618722216290087 0.19509049254716299 0.1476063280525187);
--color-earth-400: color(rec2020 0.3245288362365081 0.2970499545717134 0.23514084230029136);
--color-earth-500: color(rec2020 0.4408961266162129 0.40788114882698434 0.3333633427981837);
--color-earth-600: color(rec2020 0.5611274799712955 0.5250094099756921 0.4432170308800213);
--color-earth-700: color(rec2020 0.6798668095137222 0.6452020529149817 0.5662568168856399);
--color-earth-800: color(rec2020 0.7922534687997217 0.7654511231943659 0.7038774415165945);
--color-earth-900: color(rec2020 0.8976343825978005 0.883592130742318 0.8509899383024522);
--color-grey-50: color(rec2020 0.00961826363380804 0.009618264038815091 0.009618266138574793);
--color-grey-950: color(rec2020 0.942912225524599 0.9429122452730601 0.9429123476589802);
--color-grey-100: color(rec2020 0.031158456560907512 0.031158457872931682 0.03115846467512325);
--color-grey-200: color(rec2020 0.10557871844613284 0.10557872232824911 0.10557874245508558);
--color-grey-300: color(rec2020 0.1990508273088455 0.19905083296213316 0.19905086227160673);
--color-grey-400: color(rec2020 0.3021786813707578 0.3021786889781795 0.3021787284188648);
--color-grey-500: color(rec2020 0.41397778763158033 0.4139777973574441 0.4139778477811993);
--color-grey-600: color(rec2020 0.5315547342420267 0.5315547461958159 0.5315548081702518);
--color-grey-700: color(rec2020 0.6512927504250632 0.6512927646477267 0.6512928383851455);
--color-grey-800: color(rec2020 0.7699479766392793 0.7699479931102997 0.7699480785043283);
--color-grey-900: color(rec2020 0.8858224151252393 0.8858224337919245 0.8858225305693807);
}
}

The samples below have been built assuming the default settings above. If you've made a lot of changes they might not make sense anymore. Do a hard browser refresh to reset the config form inputs.

Monochrome

Complementary

Split Complementary

Analogous

Triadic

Square

Typography

Grey Colour Text Subheading description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Link
Stone Colour Text Subheading description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Link
Night Colour Text Subheading description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Link

Status Messages

!
Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.
!
Secondary Lorem ipsum dolor sit amet, consectetur adipiscing elit.
!
Info Lorem ipsum dolor sit amet, consectetur adipiscing elit.
!
Success Lorem ipsum dolor sit amet, consectetur adipiscing elit.
!
Warning Lorem ipsum dolor sit amet, consectetur adipiscing elit.
!
Danger Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Syntax Highlighting

let gradient;
function getGradient(width, height) {
  if (gradient) {
    return gradient;
  }

  gradient = new OffscreenCanvas(width, height);
  const context = gradient.getContext("2d");

  for (let i = 0; i < height; i++) {
    const l = remap(0, height, 1, 0, i);
    const color = {
      h: 0,
      s: 0,
      l: l,
      mode: "okhsl",
    };
    const hex = culori.formatHex(color);
    context.beginPath();
    context.rect(0, i, width, 1);
    context.fillStyle = hex;
    context.fill();
    context.closePath();
  }

  return gradient;
}

Terminal ANSI codes

benc@DESKTOP-FQRCPNJ:~/projects/bctheme$ neofetch
              .-/+oossssoo+/-.
          `:+ssssssssssssssssss+:`
        -+ssssssssssssssssssyyssss+-
      .ossssssssssssssssssdMMMNysssso.
     /ssssssssssshdmmNNmmyNMMMMhssssss/
    +ssssssssshmydMMMMMMMNddddyssssssss+
   /sssssssshNMMMyhhyyyyhmNMMMNhssssssss/
  .ssssssssdMMMNhsssssssssshNMMMdssssssss.
  +sssshhhyNMMNyssssssssssssyNMMMysssssss+
  ossyNMMMNyMMhsssssssssssssshmmmhssssssso
  ossyNMMMNyMMhsssssssssssssshmmmhssssssso
  +sssshhhyNMMNyssssssssssssyNMMMysssssss+   benc@DESKTOP-FQRCPNJ
  .ssssssssdMMMNhsssssssssshNMMMdssssssss.   --------------------
   /sssssssshNMMMyhhyyyyhdNMMMNhssssssss/    OS: Ubuntu 22.04.3 LTS on Windows 10 x86_64
    +sssssssssdmydMMMMMMMMddddyssssssss+     Kernel: 5.15.150.1-microsoft-standard-WSL2
     /ssssssssssshdmNNNNmyNMMMMhssssss/      Uptime: 5 hours, 49 mins
      .ossssssssssssssssssdMMMNysssso.       Packages: 1015 (dpkg)
        -+sssssssssssssssssyyyssss+-         Shell: bash 5.1.16
          `:+ssssssssssssssssss+:`           Theme: Adwaita [GTK3]
              .-/+oossssoo+/-.               Icons: Adwaita [GTK3]
                                             Terminal: vscode
                                             CPU: AMD Ryzen 7 5800X (16) @ 3.799GHz
                                             GPU: 003b:00:00.0 Microsoft Corporation Device 008e
                                             Memory: 1156MiB / 15958MiB