Choosing a colour palette for your bio page: brand recognition without a designer

Your colour palette determines whether visitors recognise your brand and whether they click your buttons. With the 60-30-10 rule, a WCAG contrast check, and three proven palettes, you can build a professional bio page in 20 minutes — no designer, no guesswork. Scroll to the 5-step checklist to get started.

Core concepts: colour theory for bio pages

60-30-10 rule

In one sentence: A design principle where you use 60% dominant colour, 30% secondary colour, and 10% accent colour for visual balance.

WCAG contrast

In one sentence: The Web Content Accessibility Guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text or UI components.

Colour psychology

In one sentence: The study of how colours influence emotions and behaviour — blue evokes trust, red creates urgency, green suggests growth.

Hex code

In one sentence: A six-character code (like #B3FE38) that defines a specific colour for digital applications.

Dark mode / Light mode

In one sentence: Display modes where dark or light background colours dominate respectively, each with their own contrast requirements.

Why is a thoughtful colour palette crucial for your bio page?

Short answer: Colour is the first thing visitors register — within 90 seconds they form a judgement, and 62-90% of that assessment is based on colour alone.

Your bio page is often the first touchpoint between you and a potential follower, customer, or collaboration partner. Unlike your Instagram feed or TikTok profile, you have complete control over the visual experience on your bio page. That freedom is both an opportunity and a pitfall.

A randomly chosen colour palette creates cognitive dissonance: visitors sense that "something's off" without being able to articulate what. The result? They click away before seeing your content. A thoughtful palette, on the other hand:

• Strengthens brand recognition — consistent colours make you recognisable across platforms
• Directs attention — accent colours draw the eye to important call-to-actions
• Communicates values — colours evoke specific emotions and associations
• Improves accessibility — sufficient contrast makes your page readable for everyone

How do you apply the 60-30-10 rule to a bio page?

Short answer: Use 60% for your background, 30% for buttons and sections, and 10% for your most important call-to-action or brand accent.

The 60-30-10 rule originates from interior design but works perfectly for digital interfaces. The principle is simple: visual harmony emerges when three colours are combined in this ratio.

60% — The dominant colour (background)

This is your "canvas". On a bio page, this is typically your background colour. Choose a neutral or muted tone that:

• Doesn't compete with your profile photo
• Provides sufficient contrast for text
• Isn't fatiguing when viewed for extended periods

Examples: off-white (#FAFAFA), warm grey (#F5F3F0), or deep dark blue (#0D1B2A) for dark mode.

30% — The secondary colour (structure)

This colour creates visual structure. On a bio page, use it for:

• Standard button backgrounds
• Section dividers
• Hover states
• Secondary text colour

Choose a colour that complements your dominant colour but doesn't demand attention.

10% — The accent colour (conversion)

This is your "power colour" — the colour that drives visitors to action. Reserve it exclusively for:

• Your primary call-to-action button
• Important links or highlights
• Your signature brand element

Through sparing use, this colour stands out maximally. Consider the difference between a page with five red buttons versus a single red button among grey alternatives.

How do you check WCAG contrast for buttons and text?

Short answer: Use a free tool like WebAIM Contrast Checker and ensure at least 4.5:1 contrast for normal text, 3:1 for large text and UI elements.

Accessibility isn't a luxury — it's a requirement. Approximately 8% of men and 0.5% of women have some form of colour blindness. Additionally, people visit your page in varying lighting conditions: bright sunshine, dim café, dark bedroom.

WCAG 2.1 minimum requirements

Element	Minimum contrast ratio	Example
Normal text (<18px)	4.5:1	Dark grey #595959 on white
Large text (≥18px bold or ≥24px)	3:1	Medium grey #767676 on white
UI components (buttons, icons)	3:1	Button border against background
Focus indicators	3:1	Outline during tab navigation

Practical contrast check in 3 steps

1. Open WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
2. Enter your hex codes — foreground colour (text) and background colour
3. Read the result — the tool shows the ratio and whether you meet AA/AAA level

Specifically test these combinations on your bio page:

• Button text against button background
• Body text against page background
• Link text against surrounding text
• Placeholder text in input fields

Common contrast mistakes

• Light grey on white — popular in minimalist designs, but often illegible (contrast frequently only 2:1)
• Pastels on pastels — soft pink text on light blue looks "aesthetic" but fails every accessibility test
• Neon on dark — bright green text on black may technically pass but causes "vibration" that makes reading difficult

Dark mode or light mode: which should you choose for your bio page?

Short answer: Choose based on your brand personality and target audience — dark mode works for tech, gaming, and nightlife; light mode for wellness, education, and B2B.

The dark-vs-light debate isn't a matter of personal preference. Both modes have objective pros and cons, and the right choice depends on your specific context.

Criterion	Light mode	Dark mode
Readability for long text	✅ Better for longer passages	⚠️ Can be fatiguing
OLED battery consumption	⚠️ Higher consumption	✅ Up to 60% less with true black
Use in bright light	✅ Better visibility	❌ Reflections problematic
Use in darkness	⚠️ Can be blinding	✅ More comfortable for eyes
Photo display	✅ Colours more accurate	⚠️ Colours may appear different
"Premium" feel	Clean, professional	Modern, exclusive
Typical niches	Coaching, education, lifestyle	Tech, gaming, music, nightlife

Design considerations per mode

Light mode tips:

• Avoid pure white (#FFFFFF) — use off-white (#FAFAFA or #F8F7F4) to reduce eye strain
• Ensure your accent colour is bold enough to stand out against a light background
• Test with your profile photo — some photos "disappear" against light backgrounds

Dark mode tips:

• Avoid pure black (#000000) — use dark grey (#121212 or #1A1A2E) for softer contrast
• Adjust your text colour — don't use pure white (#FFFFFF) but off-white (#E8E8E8) for less "flickering"
• Slightly increase saturation of accent colours — colours appear more muted on dark backgrounds

Which colours suit which creator niche?

Short answer: Each colour evokes specific emotions — blue for trust (finance, tech), green for growth (wellness, sustainability), orange for energy (fitness, entertainment).

Colour psychology isn't an exact science, but certain associations are consistently documented in marketing and design research. Use these as a starting point, not as law.

Colour	Primary associations	Suitable niches	Warnings
Blue	Trust, stability, professionalism	Finance, tech, coaching, B2B	Can appear cold or corporate
Green	Growth, health, nature, calm	Wellness, sustainability, finance (growth)	Avoid "neon green" — looks cheap
Purple	Creativity, luxury, spirituality	Beauty, art, coaching, spirituality	Dark purple can look sombre
Orange	Energy, enthusiasm, friendliness	Fitness, food, entertainment, retail	Too much orange becomes overwhelming
Pink	Playfulness, compassion, modernity	Beauty, fashion, lifestyle, Gen Z	Millennial pink is becoming dated
Yellow	Optimism, creativity, warmth	Education, children, creative	Difficult to read as text colour
Red	Urgency, passion, energy	Food, entertainment, sale/urgency	Use sparingly — can appear aggressive
Black	Luxury, elegance, power	Fashion, luxury, tech, photography	Combine with warm accent for balance

Regional nuances

Colour associations vary by culture. In the UK and US:

• Red, white, and blue combinations carry patriotic connotations — deploy consciously or avoid entirely depending on your brand
• Green increasingly associates with sustainability — only use if your claim is legitimate (avoiding greenwashing)
• Purple has historically been linked to royalty in British culture, adding a premium perception

3 ready-to-use colour palettes for your bio page

Short answer: Copy these hex codes directly into your bio-page builder for a professional result without design expertise.

Palette 1: "Clean Professional" (Light mode)

Ideal for: coaches, consultants, B2B services, education

Role	Colour	Hex code	Usage
Dominant (60%)	Warm off-white	#FAF9F6	Page background
Secondary (30%)	Soft grey-blue	#E8EDF2	Button background, sections
Accent (10%)	Deep teal	#0D6E6E	Primary CTA, links
Primary text	Warm dark grey	#2D3436	Body text
Secondary text	Medium grey	#636E72	Subtext, labels

Contrast check: #2D3436 on #FAF9F6 = 12.4:1 ✅ | #0D6E6E on #E8EDF2 = 4.8:1 ✅

Palette 2: "Creative Energy" (Light mode with punch)

Ideal for: content creators, designers, lifestyle, entertainment

Role	Colour	Hex code	Usage
Dominant (60%)	Cream	#FFFBF5	Page background
Secondary (30%)	Soft coral	#FEDBD0	Button background, highlights
Accent (10%)	Electric coral	#E85A4F	Primary CTA
Primary text	Espresso	#1E1E1E	Body text
Secondary text	Warm grey	#5C5C5C	Subtext

Contrast check: #1E1E1E on #FFFBF5 = 18.1:1 ✅ | #E85A4F on #FEDBD0 = 3.2:1 ✅ (large text)

Palette 3: "Tech Minimal" (Dark mode)

Ideal for: developers, gamers, musicians, tech reviewers

Role	Colour	Hex code	Usage
Dominant (60%)	Soft black	#121212	Page background
Secondary (30%)	Charcoal	#1E1E1E	Buttons, cards
Accent (10%)	Electric lime	#B3FE38	Primary CTA, highlights
Primary text	Off-white	#E8E8E8	Body text
Secondary text	Muted grey	#A0A0A0	Subtext

Contrast check: #E8E8E8 on #121212 = 15.9:1 ✅ | #121212 on #B3FE38 = 14.2:1 ✅

Colour choices by creator type

Scenario 1: Fitness coach with online programmes

You sell transformation programmes and want to project energy and results. Choose a light-mode base with a powerful accent colour. Orange or coral red as an accent communicates energy and action. Avoid pastels — they undermine the "power" message fitness clients expect.

Scenario 2: Tech reviewer on YouTube

Your audience expects a modern, tech-savvy aesthetic. Dark mode is the standard here. Combine with a neon accent (lime, cyan, or purple) for that signature tech feel. Ensure your thumbnails contrast well against the dark background.

Scenario 3: Life coach for female entrepreneurs

Warmth and professionalism must coexist. Choose a light-mode base with soft, warm tones. Terracotta, dusty rose, or sage as a secondary colour. Avoid overly corporate blue (too distant) or overly bright pink (too childish).

Scenario 4: Musician/DJ with events

Nightlife and entertainment call for dark mode with statement colours. Purple, magenta, or gold as an accent. Your page should reflect the atmosphere of your performances — no corporate office vibe.

Scenario 5: Sustainable lifestyle blogger

Green is the obvious choice, but don't fall into the "greenwashing" trap with garish neon green. Choose muted, natural green tones (sage, olive, eucalyptus) combined with earthy neutrals like warm beige or terracotta.

Choosing your colour palette: 5-step checklist

1. Determine your mode — Analyse your target audience and niche. Tech, gaming, nightlife → dark mode. Coaching, wellness, education → light mode. Note your choice.
2. Choose your dominant colour (60%) — Select a neutral background colour that doesn't compete with your profile photo. Test with your existing visual content.
3. Select your secondary colour (30%) — Choose a complementary colour for buttons and sections. Use a colour wheel tool if you're unsure.
4. Determine your accent colour (10%) — This is your brand colour. Choose something that stands out, matches your niche emotion, and is consistent with your other platforms.
5. Test WCAG contrast — Check all text-background combinations on WebAIM. Minimum 4.5:1 for small text, 3:1 for buttons and large text.

Edge cases and tricky situations

"My brand colour has poor contrast — what now?"

You don't need to change your brand colour. Use a darker or lighter variant of the same hue for text, and reserve the original brand colour for decorative elements or large areas where no text sits on top.

"I want to use multiple bold colours"

That's possible, but then your 10% accent shifts to 20% — compensate by making your 30% secondary colour more neutral. Two bold colours only work if they're complementary on the colour wheel (opposite each other).

"Should my bio page match my Instagram feed?"

Consistency aids brand recognition, but perfect matching isn't necessary. Ensure the mood and feeling align. The same colour family is sufficient — identical hex codes are overkill.

"My photos have lots of different colours"

Then choose a neutral background (grey, off-white, or soft black) that functions as a "canvas". Let your content provide the colour rather than your interface.

"Is white (#FFFFFF) really that bad?"

Pure white isn't "bad" but can cause eye strain during extended viewing due to high contrast with text. Off-white (#FAFAFA, #F8F7F4) is visually almost identical but more comfortable. The same applies to pure black (#000000) in dark mode — use #121212 instead.

"How often should I change my colours?"

As rarely as possible. Brand recognition builds through consistency. Only change if your brand fundamentally shifts (new niche, different audience) or if your current palette demonstrably isn't working (poor CTR on buttons, user feedback).

Disclaimer: Colour psychology research shows trends, not universal truths. Always test with your own audience via A/B testing where possible. Accessibility requirements may vary by region and audience.

Sources

• W3C Web Content Accessibility Guidelines (WCAG) 2.1 — w3.org/WAI/WCAG21
• WebAIM Contrast Checker — webaim.org/resources/contrastchecker
• Material Design Color System — m3.material.io/styles/color
• Nielsen Norman Group: Dark Mode Research — nngroup.com/articles/dark-mode
• Coolors Palette Generator — coolors.co
• GOV.UK Design System: Colour — design-system.service.gov.uk/styles/colour

Frequently asked questions

What is the 60-30-10 rule for colour palettes?

The 60-30-10 rule is a design principle where you use 60% dominant colour (background), 30% secondary colour (buttons, sections), and 10% accent colour (call-to-action) for visual balance on your bio page.

What is WCAG contrast and why does it matter?

WCAG contrast refers to the Web Content Accessibility Guidelines that specify minimum contrast ratios: 4.5:1 for normal text and 3:1 for large text or UI components. This ensures your bio page is readable for everyone, including people with visual impairments.

What is the difference between dark mode and light mode?

Light mode uses a light background with dark text, ideal for coaching, education, and B2B. Dark mode uses a dark background with light text, popular with tech, gaming, and music. Each mode has its own contrast requirements and design considerations.

Which colours evoke which emotions?

Blue evokes trust and professionalism (finance, tech), green communicates growth and health (wellness, sustainability), orange projects energy (fitness, entertainment), and purple suggests creativity and luxury (beauty, art). Context and culture influence these associations.

How do I test whether my colours have sufficient contrast?

Use the free WebAIM Contrast Checker at webaim.org/resources/contrastchecker. Enter your foreground colour (text) and background colour as hex codes, and the tool shows whether you meet WCAG AA level (4.5:1 for text, 3:1 for UI).

Should I choose dark mode or light mode for my bio page?

Choose based on your niche and target audience. Dark mode suits tech, gaming, music, and nightlife — it looks modern and saves OLED battery. Light mode works better for coaching, wellness, education, and B2B — it's more comfortable for long text and more visible in bright light.

Can I use multiple accent colours?

Yes, but sparingly. If you want two bold colours, choose complementary colours (opposite each other on the colour wheel) and make your secondary colour more neutral. Too many accent colours compete for attention and undermine your primary call-to-action.

How often should I change my colour palette?

As rarely as possible. Brand recognition builds through consistency over time. Only change with fundamental brand shifts (new niche, different audience) or when data shows your current palette isn't converting (low CTR, negative feedback).

Should my bio page exactly match my Instagram?

Exact matching isn't necessary — the same mood and colour family is sufficient. Consistency aids brand recognition, but each platform has its own constraints. Ensure the emotional tone aligns, not necessarily every hex code.

Why should I avoid pure white (#FFFFFF)?

Pure white can cause eye strain during extended viewing due to high contrast with text. Off-white tints like #FAFAFA or #F8F7F4 are visually almost identical but more comfortable for the eyes. The same applies to pure black (#000000) in dark mode — use #121212 instead.

Which colour works best for call-to-action buttons?

There's no universally "best" CTA colour. Effectiveness depends on contrast with your background and the 10% rule: your accent colour should stand out because you use it sparingly. Orange and green often test well, but an unexpected colour that contrasts with your palette can be more effective.

How do I choose colours if I'm colour blind?

Rely on hex codes and contrast ratios rather than visual assessment. Use WebAIM Contrast Checker for objective measurements. The ready-made palettes in this article are already tested for WCAG compliance. Also consider asking someone who can distinguish colours for feedback.

Ready to get started with a professional colour palette? Create your LinkDash page and choose from pre-tested themes or build your own colours with real-time preview.

See also: Designing your bio page for maximum conversion and Link-in-bio strategy for 2025.