# Free hair salon website template
> Free HTML hair salon website template for colour studios and hairdressers, with a price list and booking form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
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.
- Page: https://8b.com/templates/undertone/
- Live demo: https://8b.com/templates/undertone/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/undertone/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/hair-salon-website-template
- Download ZIP: https://8b.com/templates/undertone/hair-salon-website-template.zip
- Template name in the repository: Undertone
- At a glance: 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.
## Use it with an AI coding agent
Download the files into the project (Windows PowerShell: `curl.exe`):
```bash
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
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make this the site for . 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.
```
Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/hair-salon-website-template my-site`.
## About
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](https://8b.com/templates/moth-marigold/) 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.
## Design
- 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.
## Sections and motion
- **Navigation** (navigation): top bar: five section links, the wordmark, phone number and a Book a chair button; hides on scroll down; phone menu overlay. Motion: 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** (opening): red first screen: statement "We start with the grey", paragraph, Book a chair button, a copper hair photo and two undertone badges. Motion: 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** (shades): 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). Motion: 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): "Cut dry. Cut once." heading over one photo sliced by a red line, then four cuts with prices (demo: blunt bob, shag, crop, fringe). Motion: 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** (consult): free daylight consultation: photo, three numbered steps and an example formula card. Motion: The window photo is revealed by a torn edge and the formula card drops on, tilted, once each.
- **Late** (late): pinned night scene: a neon photo seen through the letters of the word "Late", then the Thursday late opening and a button. Motion: 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** (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). Motion: 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** (transform): transformation days: a spray-painted word "Louder" across the width above a portrait, a short pitch, a from-price with deposit and a button. Motion: 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** (prices): full price list in three groups with a note and a photo (demo: Cut, Colour, Lightening). Motion: The colourist photo turns from grey to colour as it scrolls in; the three price bands do not move.
- **Keep it loud** (care): 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. Motion: 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** (contact): booking: heading, lede, address, phone, email, opening hours, request form, three rule notes and a studio photo. Motion: The three rule notes stamp on and the studio photo is revealed by a torn edge, once each.
- **Footer** (footer): ink footer: portrait, links to nine sections, address, phone, email, Instagram and TikTok, a huge wordmark, copyright with the Design: 8B credit. Motion: The portrait turns from grey to colour as it scrolls in.
## Good for
- hair salon or colour studio
- hairdresser or barber shop
- beauty or nail studio with a price list and a small team
- any small service business with a menu of prices, named specialists and late opening
## Questions
**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](https://8b.com/) 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.
## Before publishing
Replace: social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses).
- 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.
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).