Free hair salon website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: undertone.md, data: undertone.json

Hair salon website template: first screen on a phone

About this hair salon website template

Hair salon website template: one free HTML file for a cut and colour studio, with six signature shades, a four-stylist team, a full price list, aftercare rules and a booking form. The look is loud red, ink black and cyan, with torn-paper edges. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 109 KB index.html with its CSS and JavaScript inside, 12 sections, 19 Unsplash photos credited in CREDITS.md, Bricolage Grotesque and Geist from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Hair salon websites mostly have to answer three questions: what will the colour look like, what does it cost and who does it. This page answers them with six shades, four cuts, a Thursday late opening, four stylist rows and a three-group price list. For beauty salon website templates in the nails or lashes line, the price list and team rows carry over; the hair photos and shade names do not.

Give Claude Code, Cursor or Codex the facts only the studio has: prices, opening hours, stylist names and years, address, and the consultation, patch test and deposit terms. The demo invents all of them, down to the formula card and the shade names. The agent should keep the section ids, the classes AGENTS.md lists and exactly six shades and five aftercare rules, and update --len when it changes Late, Louder or the footer wordmark. Vibe coding the rest is copy and photos.

Choose this when the studio sells colour and wants a loud page. A local shop such as a flower shop will want a calmer layout. A barber with no colour menu can delete the shades section with its style, its script and the Shades links in the menus and footer. The weak spot is booking: every button jumps to a form that sends nothing until you connect a service, and there is no calendar. Owners who do not edit code can use the 8B builder.

Good for:

Hair salon or colour studioHairdresser or barber shopBeauty or nail studio with a price list and a small teamAny small service business with a menu of prices, named specialists and late opening

Turn the hair salon website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/hair-salon-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my salon: name, address, phone, email, services with prices, stylist names, roles and years, opening hours, consultation, patch test and deposit terms, how people book>. Replace first the studio name in every letter case, the shade names, prices, team and demo address. Keep the section ids, the classes AGENTS.md lists, six shades and five aftercare rules, and set --len on Late, Louder and the footer wordmark. Ask me for missing facts; never invent prices, hours or contacts.

In a terminal

npx degit 8bsite/hair-salon-website-template my-site

Hair salon website design and motion

Palette

#f6f6f4 page ground, the solid nav bar after a short scroll, the shades, consultation, transformation and aftercare sections#0e0e0e text, rules, the dark late, prices and footer sections, the fill of the two ink buttons before the hover and of three badges#d3261e the opening screen and contact section ground, the colour price band, big numerals, the cut rule, red badges, the word Louder, the price in the transformation section and the hover fill of ink buttons#dcdcd8 grey ground of the cuts and chairs sections and behind photos while they load#36c6cb cyan accent: Cool badges, the lightening price band and the layer a white button's hover wipe reveals#ffffff paper notes, form fields, the fill of white buttons, labels on ink buttons, text on red and ink, the white cut price band#555553 secondary text: intros, descriptions, roles, dashed formula lines#a3a39f muted text on the dark late, prices and footer sections

Fonts

Bricolage Grotesque: headings, logo, buttons, badges, shade names and the prices in the cut and price lists: extra-bold condensed capitals, loaded at one weight, 800
Geist: body text, labels, nav links, form fields and the from-prices under the shade strips: regular to bold, 400 to 700

Ten sections sit between bar and footer. A red opening screen puts the heading and a short paragraph on the left and a copper-hair photo on the right, with the warm and cool tones below. On wide screens the shades are six tall photo strips in one row; the stylists are large name rows with a portrait and a badge. Prices run in three columns, each under a coloured band. Torn-paper notes repeat in the consultation and contact sections.

This hair salon website design keeps red for the opening screen, the colour price band and the contact section, and ink black for the late, prices and footer sections. Cyan appears on one price band, on Cool badges and behind white buttons on hover. Condensed capitals do the talking.

Every value of this hair salon website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the hair salon website page

Navigation
Top bar: five section links, the wordmark, phone number and a Book a chair button; hides on scroll down; phone menu overlay
The bar gets a solid ground after a short scroll, slides away while you scroll down and returns when you scroll up.
We start with the grey
Red first screen: statement "We start with the grey", paragraph, Book a chair button, a copper hair photo and two undertone badges
On load the heading, the paragraph and the two tone rows rise in one after another and the photo settles from a slight zoom; there is no scroll scene.
Six shades we're known for
Six signature shades as photo strips with warm or cool tags and from-prices (demo: Rust Riot, Cherry Bruise, Violet Hour, Deep End, Ash Static, Bone Bleach)
Pinned: the six strips start as one grey stack in the middle of the row and fan out to their places one after another, each photo turning from grey to colour as you scroll.
Cut dry. Cut once.
"Cut dry. Cut once." heading over one photo sliced by a red line, then four cuts with prices (demo: blunt bob, shag, crop, fringe)
A red rule draws across the bob photo while the two halves of the photo and the two heading lines slide in from opposite sides and straighten, tied to scroll.
Fifteen minutes at the window
Free daylight consultation: photo, three numbered steps and an example formula card
The window photo is revealed by a torn edge and the formula card drops on, tilted, once each.
Late
Pinned night scene: a neon photo seen through the letters of the word "Late", then the Thursday late opening and a button
Pinned: the word Late starts so large that the neon photo fills the screen, then shrinks to its size while the photo settles, tied to scroll.
Four chairs
Four stylists as large name rows with role and years, a short bio, a booking link, a portrait and a specialism badge (demo: Ama, Jess, Theo, Dez)
Each portrait is revealed by a torn edge and turns from grey to colour as it scrolls in, and each badge stamps on.
Transformation days
Transformation days: a spray-painted word "Louder" across the width above a portrait, a short pitch, a from-price with deposit and a button
The word Louder is split into letters that start bunched at the centre and spread across the width, while the portrait moves down from over the word and settles from a smaller, tilted state, tied to scroll.
Prices
Full price list in three groups with a note and a photo (demo: Cut, Colour, Lightening)
The colourist photo turns from grey to colour as it scrolls in; the three price bands do not move.
Keep it loud
Pinned aftercare strip: a marker walks along a copper hair photo from day 0 to week 6 while the colour fades and a gloss brings it back
Pinned: a marker slides along the copper-curls strip, the colour drains and each week rule lights up as the marker reaches it; at week 6 the colour returns and the badge stamps on.
Book a chair
Booking: heading, lede, address, phone, email, opening hours, request form, three rule notes and a studio photo
The three rule notes stamp on and the studio photo is revealed by a torn edge, once each.
Footer
Ink footer: portrait, links to nine sections, address, phone, email, Instagram and TikTok, a huge wordmark, copyright with the Design: 8B credit
The portrait turns from grey to colour as it scrolls in.

Before you publish the hair salon website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a chair button in the nav and the phone menu's Book link lead to #contact now; point them to your online booking page, or keep #contact once the form is connected.
Book a chair button on the first screen lead to #contact now; point them to your online booking page, or keep #contact once the form is connected.
Book a late chair button in the Late section lead to #contact now; point them to your booking page filtered to Thursday evenings.
Plan a transformation button in the transformation section lead to #contact now; point them to your booking page or an enquiry form for long appointments.
Book with Ama, Book with Jess, Book with Theo and Book with Dez links in the chairs section lead to #contact now; point them to each stylist's own booking page.
Request a chair button in the contact form lead to a form with action "#" that checks the two required fields and shows a thank-you line; nothing is sent now; point them to your form service, or your booking system's widget.
Instagram and TikTok links in the footer lead to the networks' home pages (https://www.instagram.com/ and https://www.tiktok.com/) now; point them to your own profile addresses.
The form does not send anything yet: it only checks the name and the phone or email and shows a message. Connect a form service or a booking widget before publishing.
The Instagram and TikTok links point at the networks' home pages until you replace them.
The Late section needs scrolling inside a pinned screen on phones; the knockout word depends on JavaScript to scale, and the photo inside the letters is dark, so check it after swapping the photo.

Questions about this hair salon website template

Is this one of the free hair salon website templates, and can I use it for client sites?

Yes. It is one index.html under the MIT license, so a freelancer can ship it for salon clients at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, and there is no build step. Photos are Unsplash images, the fonts are Bricolage Grotesque and Geist under the Open Font License, and CREDITS.md lists them.

Can I use it for a barber, a nail studio or another beauty salon?

Yes, after a text pass. The structure of price list, named specialists and booking form suits barbers, lash or nail studios. Rewrite the shade names, the cuts, the aftercare rules and the stylist bios, and swap the hair photos. A barber can drop the shades section with its own style and script, and the Shades links.

Does the booking form send requests?

No. It checks the name and the phone or email field, shows a thank-you line and clears itself, but sends nothing. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or point the Book buttons at your booking page. Then edit the thank-you line, which promises a call back within one working day.

How do I hand it to Claude Code, Cursor or Codex?

Save index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md before it edits index.html. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in with your salon's facts.

What must I keep when I edit it?

Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each script. The shades row and the aftercare rules are built for six and five items. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder instead of this file. You describe the salon in a sentence and its engine designs a new site, not this template. Designing and restyling are free; hosting with SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a hair salon website? More free templates