A basic, empty LCARS console is black. We call this a screen.
A screen can be filled with text, displayed in white, green or orange, as
it has been for old CRT computer screens.
On a screen, the recognizable features of a LCARS console are the buttons,
controls, schematics, toggles, headings and more. We call them collectively
the chrome of the console. The chrome is
mostly orange or beige in TNG, very colorful in Voyager and blue-green in
the newer films.
This framework is intended to be mostly color independent, but provides some predefined colors as well as utility classes to use a specific theme or color.
By default, the framework uses CSS custom variables to cascade the
currently selected chrome and screen color through an application. The
:root pseudo-class is used to set some generic defaults.
| Name | CSS property | Default Value |
|---|---|---|
| chrome background | --lcars-chrome-bg | #999999 |
| chrome text color | --lcars-chrome-fg | #000000 |
| screen background | --lcars-screen-bg | #000000 |
| screen text color | --lcars-screen-fg | #ffffff |
While there are many colors appropriate for an LCARS interface, a realistic interface will only ever use a palette of less than 6. This section presents some predefined color that I found around the web. The sources are annotated at the bottom right of the palette tables.
An LCARS Design guideline (which will not be linked here for its use of agressive language) specifies this:
| Blue-Gray (BG) | .lcars-chrome-bg | #99c |
| Lightblue (LB) | .lcars-chrome-lb | #99f |
| Lilac (FL) | .lcars-chrome-fl | #c9c |
| Pink (PI) | .lcars-chrome-pi | #c69 |
| Light-Pink (LP) | .lcars-chrome-lp | #f9c |
| Russet (RB) | .lcars-chrome-rb | #c66 |
| Apricot (AP) | .lcars-chrome-ap | #f96 |
| Beige (BE) | .lcars-chrome-be | #fc9 |
| Light-Orange (HO) | .lcars-chrome-ho | #f7c64a |
| Orange (OR) | .lcars-chrome-or | #f90 |
| Blue-1 (b1) | .lcars-chrome-b1 | #9cf |
| Blue-2 (b2) | .lcars-chrome-b2 | #39c |
| Blue-3 (b3) | .lcars-chrome-b3 | #069 |
| Blue-4 (b4) | .lcars-chrome-b4 | #036 |
| Green-1 (g1) | .lcars-chrome-g1 | #cdb |
| Green-2 (g2) | .lcars-chrome-g2 | #0c9 |
| Green-3 (g3) | .lcars-chrome-g3 | #099 |
| Green-4 (g4) | .lcars-chrome-g4 | #066 |
| golden-tanoi (p1) | .lcars-chrome-p1 | #fc6 |
| cold-gray (p2) | .lcars-chrome-p2 | #999 |
| chestnut-rose (p3) | .lcars-chrome-p3 | #c66 |
| lilac (p4) | .lcars-chrome-p4 | #c9c |
| anakiwa (p5) | .lcars-chrome-p5 | #9cf |
| atomic-tangerine (p6) | .lcars-chrome-p6 | #f90 |
| pale-canary (pc) | .lcars-chrome-pc | #ff9 |
| golden-tanoi (gt) | .lcars-chrome-gt | #fc6 |
| neon-carrot (nc) | .lcars-chrome-nc | #f93 |
| eggplant (ep) | .lcars-chrome-ep | #646 |
| lilac (lc) | .lcars-chrome-lc | #c9c |
| anakiwa (ak) | .lcars-chrome-ak | #9cf |
| mariner (mi) | .lcars-chrome-mi | #36c |
| baltic-blue (bt) | .lcars-chrome-bt | #069 |
| blue-bell (bb) | .lcars-chrome-bb | #99c |
| melrose (mr) | .lcars-chrome-mr | #99f |
| lilac (lc) | .lcars-chrome-lc | #c9c |
| hopbush (hb) | .lcars-chrome-hb | #c69 |
| chestnut-rose (cr) | .lcars-chrome-cr | #c66 |
| orange-peel (op) | .lcars-chrome-op | #f96 |
| atomic-tangerine (at) | .lcars-chrome-at | #f90 |
| golden-tanoi (gt) | .lcars-chrome-gt | #fc6 |
| danub (db) | .lcars-chrome-db | #68c |
| indigo (ig) | .lcars-chrome-ig | #45b |
| lavender-purple (lr) | .lcars-chrome-lr | #97a |
| cosmic (cs) | .lcars-chrome-cs | #746 |
| red-damask (rd) | .lcars-chrome-rd | #d64 |
| medium-carmine (ca) | .lcars-chrome-ca | #a53 |
| bourbon (br) | .lcars-chrome-br | #b62 |
| sandy-brown (sb) | .lcars-chrome-sb | #e95 |
| periwinkle (pw) | .lcars-chrome-pw | #cdf |
| dodger-blue (dg) | .lcars-chrome-dg | #59f |
| dodger-blue-alt (dd) | .lcars-chrome-dd | #36f |
| blue (bl) | .lcars-chrome-bl | #01e |
| navy-blue (nb) | .lcars-chrome-nb | #008 |
| husk (hs) | .lcars-chrome-hs | #ba5 |
| rust (rs) | .lcars-chrome-rs | #b41 |
| tamarillo (tm) | .lcars-chrome-tm | #821 |
| offline (bs) | .lcars-chrome-bs | #4d4d4d |
| dark-1 (cb) | .lcars-chrome-cb | #133d87 |
| frame (ib) | .lcars-chrome-ib | #2350b5 |
| light-1 (ob) | .lcars-chrome-ob | #335da7 |
| light-2 (eb) | .lcars-chrome-eb | #4a72ca |
| active (vs) | .lcars-chrome-vs | #97c3e1 |
| offline (bs) | .lcars-chrome-bs | #4d4d4d |
| dark-1 (d1) | .lcars-chrome-d1 | #808080 |
| frame (fm) | .lcars-chrome-fm | #808080 |
| light-1 (l1) | .lcars-chrome-l1 | #808080 |
| light-2 (l2) | .lcars-chrome-l2 | #808080 |
| active (ac) | .lcars-chrome-ac | #ccc |
| offline (bs) | .lcars-chrome-bs | #4d4d4d |
| dark-1 (tb) | .lcars-chrome-tb | #00c |
| frame (ur) | .lcars-chrome-ur | #03f |
| light-1 (mb) | .lcars-chrome-mb | #06f |
| light-2 (ab) | .lcars-chrome-ab | #4159ff |
| active (vb) | .lcars-chrome-vb | #8d9bff |
| offline (bs) | .lcars-chrome-bs | #4d4d4d |
| dark-1 (dr) | .lcars-chrome-dr | #664406 |
| frame (on) | .lcars-chrome-on | #996509 |
| light-1 (so) | .lcars-chrome-so | #cc870c |
| light-2 (ag) | .lcars-chrome-ag | #ffa90f |
| active (my) | .lcars-chrome-my | #ffd966 |
| offline (bs) | .lcars-chrome-bs | #4d4d4d |
| dark-1 (bo) | .lcars-chrome-bo | #600 |
| frame (cm) | .lcars-chrome-cm | #900 |
| light-1 (rg) | .lcars-chrome-rg | #c00 |
| light-2 (pr) | .lcars-chrome-pr | #f00 |
| active (vp) | .lcars-chrome-vp | #ff9191 |
| black | --lcars-color-black | #000 |
| navy-blue | --lcars-color-navy-blue | #008 |
| strong-blue | --lcars-color-strong-blue | #00c |
| pure-blue | --lcars-color-pure-blue | #00f |
| blue | --lcars-color-blue | #01e |
| dark-midnight-blue | --lcars-color-dark-midnight-blue | #036 |
| nearly-pure-blue | --lcars-color-nearly-pure-blue | #03f |
| very-dark-cyan | --lcars-color-very-dark-cyan | #066 |
| baltic-blue | --lcars-color-baltic-blue | #069 |
| mostly-pure-blue | --lcars-color-mostly-pure-blue | #06f |
| dark-cyan | --lcars-color-dark-cyan | #099 |
| carribean-green | --lcars-color-carribean-green | #0c9 |
| pure-green | --lcars-color-pure-green | #0f0 |
| monochrome-green-2 | --lcars-color-monochrome-green-2 | #0f3 |
| monochrome-green-3 | --lcars-color-monochrome-green-3 | #0f6 |
| cyan-blue | --lcars-color-cyan-blue | #133d87 |
| main-blue | --lcars-color-main-blue | #2350b5 |
| monochrome-black | --lcars-color-monochrome-black | #282828 |
| very-dark-red | --lcars-color-very-dark-red | #300 |
| dark-moderate-blue | --lcars-color-dark-moderate-blue | #335da7 |
| azure-blue | --lcars-color-azure-blue | #369 |
| mariner | --lcars-color-mariner | #36c |
| dodger-blue-alt | --lcars-color-dodger-blue-alt | #36f |
| bavaria-blue | --lcars-color-bavaria-blue | #39c |
| monochrome-green-1 | --lcars-color-monochrome-green-1 | #3f0 |
| monochrome-apple | --lcars-color-monochrome-apple | #3f3 |
| saturated-blue | --lcars-color-saturated-blue | #4159ff |
| indigo | --lcars-color-indigo | #45b |
| moderate-blue | --lcars-color-moderate-blue | #4a72ca |
| black-swan | --lcars-color-black-swan | #4d4d4d |
| dodger-blue | --lcars-color-dodger-blue | #59f |
| blood-red | --lcars-color-blood-red | #600 |
| dark-brown | --lcars-color-dark-brown | #664406 |
| eggplant | --lcars-color-eggplant | #646 |
| lead-gray | --lcars-color-lead-gray | #666 |
| danub | --lcars-color-danub | #68c |
| cosmic | --lcars-color-cosmic | #746 |
| steel-gray | --lcars-color-steel-gray | #808080 |
| tamarillo | --lcars-color-tamarillo | #821 |
| very-light-blue | --lcars-color-very-light-blue | #8d9bff |
| chelsea-gem | --lcars-color-chelsea-gem | #965032 |
| very-soft-blue | --lcars-color-very-soft-blue | #97c3e1 |
| crimson-red | --lcars-color-crimson-red | #900 |
| orange-brown | --lcars-color-orange-brown | #996509 |
| lavender-purple | --lcars-color-lavender-purple | #97a |
| cold-gray | --lcars-color-cold-gray | #999 |
| anakiwa | --lcars-color-anakiwa | #9cf |
| blue-bell | --lcars-color-blue-bell | #99c |
| melrose | --lcars-color-melrose | #99f |
| medium-carmine | --lcars-color-medium-carmine | #a53 |
| rust | --lcars-color-rust | #b41 |
| bourbon | --lcars-color-bourbon | #b62 |
| husk | --lcars-color-husk | #ba5 |
| free-speech-red | --lcars-color-free-speech-red | #c80000 |
| rangoon-red | --lcars-color-rangoon-red | #c00 |
| chestnut-rose | --lcars-color-chestnut-rose | #c66 |
| hopbush | --lcars-color-hopbush | #c69 |
| strong-orange | --lcars-color-strong-orange | #cc870c |
| desaturated-red | --lcars-color-desaturated-red | #c99 |
| lilac | --lcars-color-lilac | #c9c |
| chinese-silver | --lcars-color-chinese-silver | #ccc |
| grayish-green | --lcars-color-grayish-green | #cdb |
| periwinkle | --lcars-color-periwinkle | #cdf |
| red-damask | --lcars-color-red-damask | #d64 |
| very-light-gray | --lcars-color-very-light-gray | #eee |
| sandy-brown | --lcars-color-sandy-brown | #e95 |
| sunset-orange | --lcars-color-sunset-orange | #f55 |
| pure-red | --lcars-color-pure-red | #f00 |
| bittersweet | --lcars-color-bittersweet | #f66 |
| bright-coral | --lcars-color-bright-coral | #f77 |
| light-orange | --lcars-color-light-orange | #f7c64a |
| very-light-red | --lcars-color-very-light-red | #f88 |
| very-light-pink | --lcars-color-very-light-pink | #ff9191 |
| atomic-tangerine | --lcars-color-atomic-tangerine | #f90 |
| neon-carrot | --lcars-color-neon-carrot | #f93 |
| orange-peel | --lcars-color-orange-peel | #f96 |
| pale-magenta | --lcars-color-pale-magenta | #f9c |
| light-salmon-pink | --lcars-color-light-salmon-pink | #f99 |
| all-gold | --lcars-color-all-gold | #ffa90f |
| patient-pink | --lcars-color-patient-pink | #faa |
| amber | --lcars-color-amber | #ffb000 |
| pale-red | --lcars-color-pale-red | #fbb |
| light-amber | --lcars-color-light-amber | #fc0 |
| golden-tanoi | --lcars-color-golden-tanoi | #fc6 |
| peach-orange | --lcars-color-peach-orange | #fc9 |
| light-red | --lcars-color-light-red | #fcc |
| medium-yellow | --lcars-color-medium-yellow | #ffd966 |
| very-pale-red | --lcars-color-very-pale-red | #fdd |
| laser-lemon | --lcars-color-laser-lemon | #ff6 |
| pale-canary | --lcars-color-pale-canary | #ff9 |
| white | --lcars-color-white | #fff |