SOURCE

console 命令行工具 X clear

                    
>
console
const colors = src()
const bases = {
  W: 'white',
  T: 'tan',
  Y: 'yellow',
  O: 'orange',
  R: 'red',
  I: 'pink',
  P: 'purple',
  B: 'blue',
  G: 'green',
  N: 'brown',
  E: 'grey',
  K: 'black'
}
const numToCode = num => {
  const delta = num > 16 ? 65 : 64
  return String.fromCharCode(num + delta)
}
const codeToColor = (B, i) => {
  const code = B + numToCode(i)
  const color = colors.find(x => x[0] === code)
  return color[1]
}
const codeToStyle = (B, i) => {
  const code = B + numToCode(i)
  const color = colors.find(x => x[0] === code)
  const rgb = [1, 3, 5].map(x => parseInt(color[2].slice(x, x + 2), 16))
  const fg = rgb[0] + rgb[1] + rgb[2]
  return {
    backgroundColor: color[2],
    color: fg > 384 ? 'black': 'white'
  }
}
const { createApp, reactive, computed, toRefs } = Vue
createApp({
  setup() {
    const data = reactive({
      bases: Object.entries(bases)
    })
    return {
      ...toRefs(data),
      numToCode,
      codeToColor,
      codeToStyle
    }
  }
}).mount('#app')

function src () {
  const raw = `
WA	white	#fffdfc
WB	ivory	#fdf5e4
WC	chiffon	#faf9f1
WD	linen	#f2ead2
WE	frost	#ebfbfc
WF	pearl	#fbfbf7
WG	cream	#fffad9
WH	salt	#f6efeb
WI	bone	#e7decb
WJ	porcelain	#fffdfc
WK	alabaster	#fef9f1
WL	egg shell	#fdf9e2
WM	lace	#f9f2eb
WN	daisy	#ffffff
WO	parchment	#fbf4de
WP	snow	#f5fdfc
WR	cotton	#fbfbf7
WS	coconut	#fff1e5
WT	powder	#fbfbf7
WU	rice	#faf5ee
TA	tan	#e5dbac
TB	granola	#d6b759
TC	sugar cookie	#f2eaad
TD	oyster	#dbd6a0
TE	sandcastle	#dac17b
TF	beige	#ecdd9a
TG	oat	#dec889
TH	sand	#d6b862
TI	biscotti	#e3c465
TJ	buttermilk	#fceeb1
TK	macaroon	#f8df75
TL	egg nog	#fae19b
TM	sepia	#e2b777
TN	parmesan	#fce991
TO	sand dollar	#ece7b9
TP	hazel wood	#c9ba8d
TR	fawn	#c6a951
TS	latte	#e9c07a
TT	hazelnut	#bda45d
TU	shortbread	#fae78f
YA	yellow	#fce54b
YB	flaxen	#d6b759
YC	corn	#e4cc04
YD	bumblebee	#fce205
YE	honey	#ffc20b
YF	canary	#f9c702
YG	butter	#fde227
YH	medallion	#e2b003
YI	banana	#fcf3a2
YJ	blonde	#fdea75
YK	gold	#f9a501
YL	lemon	#effd5e
YM	dandelion	#fccd29
YN	butterscotch	#fabc01
YO	pineapple	#fde227
YP	daffodil	#fdee87
YR	mustard	#e8b728
YS	fire	#fca40e
YT	dijon	#c29200
YU	tuscan sun	#fcd129
OA	orange	#ed7014
OB	rust	#8c4003
OC	bronze	#b1550c
OD	honey	#eb9705
OE	marmalade	#d06002
OF	tangerine	#f88127
OG	ginger	#bc5502
OH	cantaloupe	#fba171
OI	carrot	#ec7117
OJ	amber	#893100
OK	marigold	#fcae1c
OL	tiger	#fb6a01
OM	apricot	#ed820e
ON	squash	#c85b0a
OO	sandstone	#d57129
OP	cider	#b46727
OR	fire	#dc561b
OS	clay	#7f400b
OT	spice	#793802
OU	yam	#cc5801
RA	red	#d0302c
RB	merlot	#531e1a
RC	scarlet	#900d09
RD	mahogany	#410c08
RE	currant	#670c07
RF	cherry	#990f01
RG	garnet	#600b04
RH	wine	#4b0804
RI	blood	#700b03
RJ	blush	#bc5449
RK	rose	#e1242a
RL	crimson	#b80e0a
RM	brick	#7e2710
RN	sangria	#5e1814
RO	candy	#d11402
RP	jam	#600f0a
RR	ruby	#8f0602
RS	apple	#a81b0d
RT	berry	#781712
RU	lipstick	#9b0f02
IA	pink	#f599cc
IB	blush	#fec5e4
IC	salmon	#fcaa9e
ID	rosewood	#9f4141
IE	ballet slipper	#f69abf
IF	rose	#fc94ad
IG	watermelon	#fd7e9b
IH	coral	#fd7c68
II	lemonade	#fbbaca
IJ	crepe	#f2b8c5
IK	fushcia	#fc46a9
IL	flamingo	#fda4b8
IM	peach	#fb9482
IN	taffy	#fa86c5
IO	magenta	#e11584
IP	punch	#f05277
IR	rouge	#f26a8a
IS	strawberry	#fc4c4d
IT	bubblegum	#fc5ca8
IU	hot pink	#fe1694
PA	purple	#a22cc4
PB	lavender	#e29ef5
PC	gram	#663046
PD	jam	#66032d
PE	raisin	#290815
PF	mauve	#794987
PG	plum	#601935
PH	periwinkle	#bd92d3
PI	iris	#9766c5
PJ	orchid	#ae68ee
PK	violet	#700092
PL	magenta	#a00459
PM	sangria	#4c0e27
PN	heather	#9b7bb8
PO	mulberry	#4c0020
PP	boysenberry	#620435
PR	lilac	#b55fcc
PS	eggplant	#301331
PT	amethyst	#a35de5
PU	wine	#2c041a
BA	blue	#3a43ba
BB	indigo	#281d5d
BC	peacock	#002d36
BD	spruce	#2b3d4b
BE	denim	#151e3d
BF	slate	#757b87
BG	cobalt	#1337bd
BH	azure	#151fa6
BI	stone	#59778d
BJ	admiral	#051094
BK	sky	#62c5d9
BL	teal	#48a9ac
BM	cerulean	#0392c2
BN	aegean	#1d456d
BO	sapphire	#52b2bf
BP	navy	#0a1070
BR	ocean	#006063
BS	lapis	#2731c2
BT	berry	#241570
BU	arctic	#81edfd
GA	green	#3ab042
GB	lime	#aef359
GC	pear	#74b62d
GD	pine	#224e1d
GE	pickle	#597c34
GF	chartreuse	#b0fb38
GG	fern	#5bbb63
GH	moss	#456c1d
GI	parakeet	#02bf4a
GJ	pistachio	#b1d2c1
GK	juniper	#3a5210
GL	olive	#98be63
GM	shamrock	#03ab12
GN	mint	#98edc2
GO	basil	#32602d
GP	sage	#718b68
GR	emerald	#01890f
GS	seafoam	#3cec96
GT	seaweed	#354920
GU	crocodile	#607d3b
NA	brown	#221709
NB	carob	#36250f
NC	walnut	#432710
ND	chocolate	#2c1502
NE	brunette	#3a1e07
NF	coffee	#4a371b
NG	hickory	#361c0f
NH	caramel	#64350f
NI	tortilla	#997a4f
NJ	cinnamon	#632a0d
NK	mocha	#3b280c
NL	wood	#3e2f1c
NM	gingerbread	#5d2b04
NN	umber	#352315
NO	penny	#512914
NP	peanut	#795b33
NR	pecan	#4a2511
NS	syrup	#461f01
NT	tawny	#7e471c
NU	cedar	#4a3627
EA	grey	#6b616d
EB	pewter	#696780
EC	slate	#3e3c53
ED	dove	#7c6d7e
EE	pebble	#333333
EF	shadow	#373737
EG	cloud	#c5c5cf
EH	anchor	#41414b
EI	fog	#655965
EJ	lead	#3f3f4d
EK	graphite	#574d5a
EL	silver	#adacc7
EM	ash	#544c4d
EN	flint	#7e7d9b
EO	coin	#9796a8
EP	iron	#312d30
ER	smoke	#59515d
ES	porpoise	#4c4b5c
ET	charcoal	#221f22
EU	fossil	#787175
KA	black	#000000
KB	midnight	#000003
KC	grease	#090706
KD	sable	#030100
KE	obsidian	#010303
KF	ebony	#070401
KG	ink	#000000
KH	onyx	#030005
KI	jet black	#000000
KJ	jade	#000202
KK	crow	#0c0906
KL	raven	#040201
KM	pitch	#020001
KN	coal	#0b0908
KO	spider	#030100
KP	charcoal	#28231c
KR	oil	#040000
KS	soot	#140d06
KT	metal	#0d0b0a
KU	leather	#0a0704
  `.trim()
  return raw.split('\n').map(x => x.split('\t'))
}
<div id="app">
  <div v-for="[B, b] in bases" class="base">
    <div class="base-title">{{b}}</div>
    <div class="base-body">
      <div v-for="i in 20" :style="codeToStyle(B, i)" class="base-body-content">
        <div>
          <div class="color-code">{{ B + numToCode(i) }}</div>
          <div class="color-name">{{ codeToColor(B, i) }}</div>
          <div class="color-hex">{{ codeToStyle(B, i).backgroundColor }}</div>
        </div>
      </div>
    </div>
    
  </div>
</div>
.base {
  text-align: center;
  display: grid;
  grid-template-columns: 600px;
}
.base-title {
  font-size: 32px;
}
.base-body {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 75px 75px 75px 75px 75px;
}
.base-body-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-code {
  font-size: 20px;
}
.color-name {
  font-size: 18px;
}

本项目引用的自定义外部资源