← Classeek case study

Classeek · Process

From the showroom to the screenHow the colored light in Classeek's showroom became the website's color system and glow.

Classeek's showroom was lit only with colorful lights. They created gradients on the walls and gave the room a more modern feel. I took the colors and the vibe from the showroom and used them as the inspiration for the website's color system and its gradients.

Project
Classeek website
Role
UI and visual design
This step
Color system · glow
Starting point
A concert photo from the showroom
A cellist and a pianist performing in the Classeek showroom. Violet and magenta light washes the wooden walls and two large prints of pink lips; warm amber light falls on the floor; candelabras stand at both sides.

The showroom

Cool light on the walls, warm light on the floor

Only colored light. Violet and magenta climb the walls, amber pools on the floor, and the candles add small warm points up high.

95%

of the violet and magenta pixels sit in the top half of the photo: the walls.

95%

of the amber pixels sit in the bottom half: the floor.

3.2×

brighter at the foot of the wall than at the top. The light rises from below.

SourceMeasured on the original photo (2835 × 1890 px). Violet/magenta = hue 235–345°, amber = hue 25–48°, saturated pixels only. Wall brightness: median luminance of the wooden wall, 45 at the top → 146 at the base.
Another concert in the showroom: three musicians at the piano under the staircase, blue-violet light on the walls and amber light on the floor.
Same room, another concert. The same split: 94% of the violet sits in the top half, 95% of the amber in the bottom half.
Two cellists playing in the showroom, lit mostly by warm amber light, with a violet glow behind them.
Closer in. Amber takes over the frame; the violet stays up behind the players.

Sampling the light

Seven colors, straight from the photo

For this page I went back to the original photo and read the real pixels: the light on the artwork and the wall, the floor, and the deepest shadow.

The showroom photo with seven numbered sample points: on the lips artwork, the wall, the floor and the piano. 1 2 3 4 5 6 7
  1. Artwork glow#A737DBViolet light on the lips print
  2. Lips#A40151Magenta, the loudest color in the room
  3. Wall, top#5F458EWhere the light fades out
  4. Wall, base#8D91F0Brightest, close to the floor
  5. Floor, amber#F7A42AThe warm pool under the players
  6. Floor, edge#EB7C26Warmer and more orange at the edge
  7. Shadow#090406Inside the piano: a warm black

Each swatch is the median of a 24 × 24 px patch on the original photo (sRGB). No edits, no filters.

From samples to palette

Two color families on a dark base

The room gave me violet and gold. The website keeps both, on a dark background, the way the room keeps them in the dark.

Violet

In the room

Artwork glow
#A737DB
Wall, top
#5F458E

On the site

Tertiary
#B414D1
Violet deep
#5A0A69

Hue 283° in the photo, 291° on the site: the same violet, a little more saturated. It's the "nightlife glow".

Gold

In the room

Floor, amber
#F7A42A
Floor, edge
#EB7C26

On the site

Accent 3
#F4D492
Accent 2
#D8A85D
Accent 1
#B88C42
Accent deep
#AC8325

Same hue family (35° on the floor, 37–42° on the site), but calmer: the floor is 96% saturated, the site golds 47–82%. Gold is the accent for buttons, links and highlights.

Dark base

In the room

Shadow
#090406

On the site

Black
#000000
Background
#18191E
Surface
#292929
Text
#F5F5F7

The room's shadows are a warm black. The site's background is a slightly cool dark grey. Greys #AEAEB2 #8E8E93 #636366 #5F606F carry secondary text and lines.

Magenta

In the room

Lips
#A40151

On the site

Not carried over

The loudest color in the room didn't become a color on the site. It stays in the photos.

Light becomes glow

The light on the wall became the glow on the site

Instead of flat dark sections, the website lights its backgrounds the way the showroom lit its walls: with soft radial gradients, no blurred shapes.

Close-up of the showroom wall: violet light rising up the wooden panels from below, and lit candles on a candelabra in the top right corner.
In the room: violet rising up the wall, candles in the top corner.
On the site: the same light, rebuilt in CSS. This panel is live code, not an image.
In the room

Violet light rises up the wall from the floor. The wall is 3.2× brighter at its base.

On the site

Violet #B414D1 at 72% rises from the bottom, centred under the imagery side.

In the room

The candles are small, warm lights up high, near the corners.

On the site

Gold #E0A94F at 40%: a small light from the top corner, on the same side.

Hypothesis · candles → top-corner gold
In the room

Where violet and amber meet on the floor, the color turns dusky #5E323B.

On the site

Violet and gold never overlap, so they never mix into a muddy brown. Panels use gold only.

Hypothesis · floor mix → the "never overlap" rule

One recipe, every size

Section, desktop · violet 760 × 600 px, gold 480 × 400 px
Section, mobile · 440 × 560 / 280 × 260 px
Panel · gold only

Why the two lights stay apart

Kept apart. Violet below, gold in the corner. Both stay clean.
Stacked. Same two gradients on the same spot. The violet loses its punch and turns a dusty, muddier tone.
/* Classeek glow · stops 100% → 60% at 0.3 → 22% at 0.6 → 0 */
background:
  radial-gradient(480px 400px at 100% 0%,   /* gold, top corner */
    rgb(224 169 79 / .40), rgb(224 169 79 / .24) 30%,
    rgb(224 169 79 / .088) 60%, transparent),
  radial-gradient(760px 600px at 75% 100%,  /* violet, from the bottom */
    rgb(180 20 209 / .72), rgb(180 20 209 / .432) 30%,
    rgb(180 20 209 / .158) 60%, transparent),
  #000;

In short

The room, carried online

Dark base from the room at night, violet from the walls, gold from the floor and the candles, and gradients that behave like light.

I didn't have to invent a nightlife mood for Classeek. It was already in the room; the website takes it online.

Photos: Classeek showroom concerts, originals from the website design file.

Palette and glow recipe: "Classeek — Rebuild" Figma file, Foundations page.

Samples and measurements: taken on the original photo files for this page.