Playground
References
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.
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.
Action
!
Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Action
!
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Action
!
Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Action
!
Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Action
!
Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Action
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+-
.ossssssssssssssssss dMMMNysssso.
/sssssssssss hdmmNNmmyNMMMMhssssss/
+sssssssss hmyd MMMMMMMNddddyssssssss+
/ssssssss hNMMMyh hyyyyhmNMMMNhssssssss/
.ssssssss dMMMNhssssssssss hNMMMdssssssss.
+ssss hhhyNMMNyssssssssssss yNMMMysssssss+
oss yNMMMNyMMhssssssssssssss hmmmhssssssso
oss yNMMMNyMMhsssssssssssssshmmmhssssssso
+ssss hhhyNMMNyssssssssssss yNMMMysssssss+ benc @DESKTOP-FQRCPNJ
.ssssssss dMMMNhssssssssss hNMMMdssssssss. --------------------
/ssssssss hNMMMyh hyyyyhdNMMMNhssssssss/ OS : Ubuntu 22.04.3 LTS on Windows 10 x86_64
+sssssssss dmyd MMMMMMMMddddyssssssss+ Kernel : 5.15.150.1-microsoft-standard-WSL2
/sssssssssss hdmNNNNmyNMMMMhssssss/ Uptime : 5 hours, 49 mins
.ossssssssssssssssss dMMMNysssso. Packages : 1015 (dpkg)
-+sssssssssssssssss yyyssss+- 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