CatBut — colors.tshex · named · linear · radial · conic · repeating

colors.ts

Solid Colors

hex(value)

hex('#9B6DFF')

#9B6DFF

hex('#FF6EC7')

#FF6EC7

hex('#4DD9AC')

#4DD9AC

hex('#FFB347')

#FFB347

hex('#FF4D5A')

#FF4D5A

hex('#5AC8FF')

#5AC8FF

named(value)

named('rebeccapurple')

rebeccapurple

named('crimson')

crimson

named('teal')

teal

named('goldenrod')

goldenrod

named('steelblue')

steelblue

named('orchid')

orchid

colors.ts

linearGradient — directions

8 directions en mots-clés

'to right'

linear-gradient(to right, #9B6DFF, #FF6EC7)

'to left'

linear-gradient(to left, #9B6DFF, #FF6EC7)

'to top'

linear-gradient(to top, #9B6DFF, #FF6EC7)

'to bottom'

linear-gradient(to bottom, #9B6DFF, #FF6EC7)

'to top right'

linear-gradient(to top right, #9B6DFF, #FF6EC7)

'to bottom right'

linear-gradient(to bottom right, #9B6DFF, #FF6EC7)

'to top left'

linear-gradient(to top left, #9B6DFF, #FF6EC7)

'to bottom left'

linear-gradient(to bottom left, #9B6DFF, #FF6EC7)

directions numériques (deg)

0deg

linear-gradient(0deg, #4DD9AC, #9B6DFF)

30deg

linear-gradient(30deg, #4DD9AC, #9B6DFF)

45deg

linear-gradient(45deg, #4DD9AC, #9B6DFF)

90deg

linear-gradient(90deg, #4DD9AC, #9B6DFF)

120deg

linear-gradient(120deg, #4DD9AC, #9B6DFF)

135deg

linear-gradient(135deg, #4DD9AC, #9B6DFF)

180deg

linear-gradient(180deg, #4DD9AC, #9B6DFF)

270deg

linear-gradient(270deg, #4DD9AC, #9B6DFF)

colors.ts

linearGradient — ColorStop patterns

strings simples (sans position)

2 stops

linear-gradient(to right, #9B6DFF, #FF6EC7)

3 stops

linear-gradient(to right, #9B6DFF, #FF6EC7, #4DD9AC)

4 stops

linear-gradient(to right, #FF4D5A, #FFB347, #4DD9AC, #5AC8FF)

5 stops 120deg

linear-gradient(120deg, #9B6DFF, #FF6EC7, #4DD9AC, #FFB347, #FF4D5A)

position% explicite

0% · 70% · 100%

linear-gradient(to right, #9B6DFF 0%, #FF6EC7 70%, #4DD9AC 100%)

0% · 20% · 80% · 100%

linear-gradient(to right, #FF4D5A 0%, #FFB347 20%, #4DD9AC 80%, #5AC8FF 100%)

tranches égales 33% 66%

linear-gradient(to bottom, #FF4D5A 0%, #FFB347 33%, #4DD9AC 66%, #5AC8FF 100%)

5 stops asymétriques

linear-gradient(90deg, #9B6DFF 0%, #FF6EC7 15%, #4DD9AC 50%, #FFB347 85%, #FF4D5A 100%)

hard stop via positionEnd — transition nette

hard stop 50%

linear-gradient(to right, #9B6DFF 0% 50%, #FF6EC7 50%)

3 bandes nettes 33% 66%

linear-gradient(to right, #4DD9AC 0% 33%, #FFB347 33% 66%, #FF4D5A 66%)

bande néon centrée

linear-gradient(to bottom, #0D0A1A 0% 20%, #9B6DFF 20% 45%, #FF6EC7 45% 55%, #9B6DFF 55% 80%, #0D0A1A 80%)

4 bandes nettes

linear-gradient(to right, #5AC8FF 0% 25%, #9B6DFF 25% 50%, #FF6EC7 50% 75%, #FFB347 75%)

colors.ts

linearGradient — repeating: true

rayures 45° transparent

repeating-linear-gradient(45deg, #9B6DFF 0% 10%, transparent 10% 20%)

candy stripes

repeating-linear-gradient(45deg, #FF6EC7 0% 12%, #9B6DFF 12% 24%)

barres horizontales

repeating-linear-gradient(90deg, #4DD9AC 0% 6%, transparent 6% 12%)

barres verticales

repeating-linear-gradient(0deg, #FFB347 0% 6%, transparent 6% 12%)

rayures 135°

repeating-linear-gradient(135deg, #5AC8FF 0% 8%, transparent 8% 16%)

tricolore répété

repeating-linear-gradient(45deg, #4DD9AC 0% 8%, #FFB347 8% 16%, #FF4D5A 16% 24%)

colors.ts

radialGradient — formes et positions

circle vs ellipse

circle at center

radial-gradient(circle at center, #9B6DFF, transparent)

ellipse at center

radial-gradient(ellipse at center, #FF6EC7, transparent)

circle 3 stops

radial-gradient(circle at center, #4DD9AC, #9B6DFF, transparent)

ellipse 3 stops

radial-gradient(ellipse at center, #FFB347, #FF4D5A, transparent)

positions

top left

radial-gradient(circle at top left, #5AC8FF, transparent)

top right

radial-gradient(circle at top right, #FF6EC7, transparent)

bottom left

radial-gradient(circle at bottom left, #4DD9AC, transparent)

bottom right

radial-gradient(circle at bottom right, #FFB347, transparent)

30% 70%

radial-gradient(circle at 30% 70%, #9B6DFF, transparent)

80% 20%

radial-gradient(ellipse at 80% 20%, #FF4D5A, transparent)

size keywords

closest-side

radial-gradient(circle closest-side at center, #9B6DFF, transparent)

closest-corner

radial-gradient(circle closest-corner at center, #FF6EC7, transparent)

farthest-side

radial-gradient(circle farthest-side at center, #4DD9AC, transparent)

farthest-corner

radial-gradient(circle farthest-corner at center, #FFB347, transparent)

top-left + farthest-corner

radial-gradient(circle farthest-corner at top left, #5AC8FF, transparent)

taille fixe 80px 40px

radial-gradient(ellipse 80px 40px at 20% 80%, #FF4D5A, transparent)

colors.ts

radialGradient — repeating: true

bullseye purple

repeating-radial-gradient(circle at center, #9B6DFF 0% 10%, transparent 10% 20%)

anneaux bicolores

repeating-radial-gradient(circle at center, #FF6EC7 0% 8%, #4DD9AC 8% 16%)

bullseye coin farthest-corner

repeating-radial-gradient(circle farthest-corner at top left, #FFB347 0% 15%, transparent 15% 30%)

ellipse anneaux serrés

repeating-radial-gradient(ellipse at center, #5AC8FF 0% 5%, #9B6DFF 5% 10%)

anneaux tricolores

repeating-radial-gradient(circle at center, #4DD9AC 0% 8%, #FFB347 8% 16%, #FF4D5A 16% 24%)

bullseye hors-centre

repeating-radial-gradient(circle farthest-corner at 80% 20%, #FF6EC7 0% 12%, transparent 12% 24%)

colors.ts

conicGradient

sans angle (depuis 0°)

3 couleurs at center

conic-gradient( at center, #9B6DFF, #FF6EC7, #4DD9AC, #9B6DFF)

roue chromatique

conic-gradient( at center, #FF4D5A, #FFB347, #4DD9AC, #5AC8FF, #9B6DFF, #FF6EC7, #FF4D5A)

at top left

conic-gradient( at top left, #9B6DFF, #FF6EC7, #4DD9AC, #9B6DFF)

at 80% 20%

conic-gradient( at 80% 20%, #4DD9AC, #FFB347, #FF4D5A, #4DD9AC)

avec angle de départ

from 45deg

conic-gradient(from 45deg at center, #9B6DFF, #FF6EC7, #4DD9AC, #9B6DFF)

from 90deg

conic-gradient(from 90deg at center, #4DD9AC, #5AC8FF, #9B6DFF, #4DD9AC)

from 180deg

conic-gradient(from 180deg at center, #FFB347, #FF4D5A, #FF6EC7, #FFB347)

from 270deg

conic-gradient(from 270deg at center, #5AC8FF, #4DD9AC, #9B6DFF, #5AC8FF)

ColorStop avec position%

4 secteurs nets (hard stops)

conic-gradient( at center, #9B6DFF 0%, #9B6DFF 25%, #FF6EC7 25%, #FF6EC7 50%, #4DD9AC 50%, #4DD9AC 75%, #FFB347 75%, #FFB347 100%)

positionEnd 30% 60%

conic-gradient( at center, #9B6DFF 0% 30%, #FF6EC7 30% 60%, #4DD9AC 60%)

6 couleurs espacées uniformément

conic-gradient( at center, #FF4D5A 0%, #FFB347 16%, #4DD9AC 33%, #5AC8FF 50%, #9B6DFF 66%, #FF6EC7 83%, #FF4D5A 100%)

from 45deg + positions 40% 60%

conic-gradient(from 45deg at center, #5AC8FF 0%, #9B6DFF 40%, #FF6EC7 60%, #5AC8FF 100%)

colors.ts

conicGradient — repeating: true

rayons alternés

repeating-conic-gradient(from 0deg at center, #9B6DFF 0% 10%, transparent 10% 20%)

pinwheel bicolore

repeating-conic-gradient(from 0deg at center, #FF6EC7 0% 12%, #9B6DFF 12% 25%)

pinwheel tricolore

repeating-conic-gradient(from 0deg at center, #4DD9AC 0% 8%, #FFB347 8% 16%, #FF4D5A 16% 25%)

from 45deg, sections serrées

repeating-conic-gradient(from 45deg at center, #5AC8FF 0% 5%, #9B6DFF 5% 10%)

from 22deg, rayons fins

repeating-conic-gradient(from 22deg at center, #FF6EC7 0% 8%, transparent 8% 16%)

at 40% 60%, tricolore

repeating-conic-gradient(from 0deg at 40% 60%, #FFB347 0% 10%, #4DD9AC 10% 20%, #9B6DFF 20% 33%)

colors.ts

Patterns créatifs

coucher de soleil

linear-gradient(to bottom, #FF4D5A, #FFB347, #9B6DFF, #0D0A1A)

lueur néon

radial-gradient(ellipse farthest-corner at center, #FF6EC7, #9B6DFF55, #0D0A1A)

roue RVB

conic-gradient( at center, red, yellow, lime, cyan, blue, magenta, red)

grille diagonale croisée

repeating-linear-gradient(45deg, #9B6DFF 0% 25%, transparent 25% 50%, #FF6EC7 50% 75%, transparent 75%)

cible (bullseye)

repeating-radial-gradient(circle at center, #FFB347 0% 15%, transparent 15% 30%)

radar / sonar

repeating-conic-gradient(from 0deg at center, #4DD9AC 0% 5%, transparent 5% 10%)

dégradé diagonal simple

linear-gradient(to bottom right, #9B6DFF, #FF6EC7)

point lumineux

radial-gradient(circle farthest-corner at center, #5AC8FF 0%, #9B6DFF 40%, #0D0A1A 100%)

arc-en-ciel en bandes

repeating-linear-gradient(135deg, #9B6DFF 0% 10%, #FF6EC7 10% 20%, #4DD9AC 20% 30%)

colors.ts

toTextCSS — couleur de texte

solid (hex / named) → color

CatBut

hex('#9B6DFF')

CatBut

hex('#FF6EC7')

CatBut

named('rebeccapurple')

CatBut

named('crimson')

gradient → background-clip: text

CatBut

linear to right

CatBut

linear 3 stops

CatBut

linear 45deg

CatBut

radial circle center

CatBut

radial ellipse left

CatBut

conic at center

CatBut

arc-en-ciel

CatBut

repeating 135deg

colors.ts

toBorderCSS — couleur de bordure

solid (hex / named) → borderColor (border-radius OK)

hex('#9B6DFF')
hex('#FF6EC7')
named('rebeccapurple')
named('crimson')

gradient → border-image (border-radius ignoré)

linear to right
linear 45deg
arc-en-ciel
radial circle
conic roue
repeating stripes

CatBut · colors.ts · hex · named · linearGradient · radialGradient · conicGradient · repeating