Ga naar hoofdinhoud

Kleurenpalet

Het complete kleurenpalet voor Milena's Cozy Treehouse Club, gebaseerd op de bestaande artwork.

Kleurenpalet Overzicht​

Geëxtraheerd uit de bestaande assets:

Kleurenpalet referentie Referentie: background_home.png - bosomgeving met boomhut

Primaire Kleuren​

De hoofdkleuren gebaseerd op de artwork:

NaamHexRGBGebruik
Bosgroen#4A7C5974, 124, 89Bomen, bladeren, natuur
Warm Hout#A67C52166, 124, 82Hout, gebouwen, meubels
Donker Hout#6B4423107, 68, 35Schaduwen, accenten
Vijverblauw#6B8E9F107, 142, 159Water, reflecties

Secundaire Kleuren​

Ondersteunende kleuren uit de artwork:

NaamHexRGBGebruik
Sage Groen#87A96B135, 169, 107Licht gebladerte
Olijfgroen#6B8E23107, 142, 35Gras, struiken
Sepia#A0522D160, 82, 45Warme schaduwen
Crème#F5DEB3245, 222, 179Warm licht, interieurs

Accent Kleuren​

NaamHexRGBGebruik
Mosterdgeel#DAA520218, 165, 32Kleding, accenten
Zachtblauw#87CEEB135, 206, 235Lucht, water highlights
Roestoranje#CD853F205, 133, 63Herfst, warmte
Zacht Groen#8FBC8F143, 188, 143Stoelen, zachte accenten

Seizoenskleuren​

Lente​

Gebaseerd op bloesem en nieuwe groei:

NaamHexGebruik
Lentegroen#90EE90Nieuwe bladeren
Bloesemroze#FFB7C5Bloesem
Zacht Geel#FFFACDZonlicht
Regenblauw#B0E0E6Regendruppels

Zomer​

Weelderig en warm:

NaamHexGebruik
Diepgroen#228B22Volledig gebladerte
Zongoud#FFD700Zomerzon
Hemelblauw#87CEEBHeldere lucht
Vuurvlieg#FFFF99Avondlichtjes

Herfst​

Warm en goud - past bij bestaande assets:

NaamHexGebruik
Herfstorange#FF8C00Vallende bladeren
Esdoornrood#CD5C5CRode bladeren
Pompoenorange#FF7518Pompoenen
Oogstgoud#DAA520Graan, oogst

Winter​

Koud maar knus:

NaamHexGebruik
Sneeuwwit#FFFAFASneeuw
IJsblauw#E0FFFFBevroren water
Bordeaux#8B0000Warmte, decoratie
Dennengroen#2F4F4FWintergroen

Interieur Kleuren​

Gebaseerd op boomhut1.png en Binnenkant.png:

Hout Tinten​

NaamHexGebruik
Licht Hout#DEB887Verse planken
Medium Hout#A67C52Vloeren, meubels
Donker Hout#6B4423Balken, randen
Schaduw Hout#4A3728Diepe schaduwen

Interieur Accenten​

NaamHexGebruik
Lantaarnlicht#FFE4B5Warm lamplicht
Stoelgroen#6B8E23Zitmeubels
Metaalgrijs#708090Kachel, pannen
Linnen#FAF0E6Beddengoed, gordijnen

UI Kleuren​

Knoppen & Interactie​

StatusHexGebruik
Primary#4A7C59Hoofdknoppen
Primary Hover#5A8C69Mouse over
Primary Active#3A6C49Ingedrukt
Secondary#A67C52Secundaire knoppen
Disabled#9E9E9EUitgeschakeld

Feedback​

TypeHexGebruik
Success#66BB6ASucces meldingen
Warning#DAA520Waarschuwingen
Error#CD5C5CFouten (zacht rood)
Info#6B8E9FInformatie

Panelen & Achtergronden​

TypeHexGebruik
Perkament#F5DEB3Dialoog achtergrond
Hout Frame#8B4513Panel randen
Overlay#00000066Transparant donker
Tooltip#FFF8DCHints, tooltips

Karakter Kleuren​

Milena (uit Meisje assets)​

ElementHexBeschrijving
Haar Blond#E8D4A2Licht blond/krullen
Haar Tips#87CEEBBlauwe punten (variatie)
Ogen#6B8E23Groen/hazel
Huid#FFDAB9Warme huidskleur
Hoodie Groen#2F4F4FCasual outfit
Trui Mosterd#DAA520Herfst outfit
Rok Patchwork#6B8E23, #8B4513, #F5DEB3Patchwork patroon

NPC Dieren (richtlijnen)​

DiersoortVacht BasisAccent
Beer#8B4513#D2B48C (snuit)
Vos#CD853F#FFF8DC (buik)
Uil#A0522D#DEB887 (borst)
Konijn#E8D4A2#FFFFFF (staart)
Eekhoorn#CD853F#FFE4C4 (buik)
Bever#8B4513#D2B48C (tanden)

Tekst Kleuren​

TypeHexGebruik
Primary#3E2723Hoofdtekst (donkerbruin)
Secondary#5D4037Secundaire tekst
Light#FFF8DCOp donkere achtergrond
Disabled#9E9E9EUitgeschakelde tekst
Geen Pure Zwart

Gebruik NOOIT pure zwart (#000000). Gebruik altijd donkerbruin (#3E2723 of #2F1F00) voor tekst en contouren. Dit past bij de warme, storybook-stijl.

Kleur Combinaties​

Aanbevolen Combinaties​

Natuur Scene:     #4A7C59 + #87A96B + #6B4423 + #87CEEB
Interieur:        #A67C52 + #DEB887 + #FFE4B5 + #6B8E23
Herfst Mood:      #DAA520 + #CD853F + #8B4513 + #6B8E23
Winter Cozy:      #2F4F4F + #FFFAFA + #8B0000 + #FFE4B5

Contrast Check​

Alle kleurcombinaties voldoen aan WCAG AA standaarden:

  • Tekst op lichte achtergrond: #3E2723 op #F5DEB3
  • Tekst op donkere achtergrond: #FFF8DC op #4A7C59

Code Exports​

Godot (GDScript)​

# colors.gd - Kleurenpalet
class_name GameColors

# Primair
const FOREST_GREEN = Color("#4A7C59")
const WARM_WOOD = Color("#A67C52")
const DARK_WOOD = Color("#6B4423")
const POND_BLUE = Color("#6B8E9F")

# Secundair
const SAGE_GREEN = Color("#87A96B")
const OLIVE_GREEN = Color("#6B8E23")
const SEPIA = Color("#A0522D")
const CREAM = Color("#F5DEB3")

# Accent
const MUSTARD = Color("#DAA520")
const SKY_BLUE = Color("#87CEEB")
const RUST_ORANGE = Color("#CD853F")

# UI
const TEXT_PRIMARY = Color("#3E2723")
const TEXT_LIGHT = Color("#FFF8DC")
const PANEL_BG = Color("#F5DEB3")

CSS Variabelen​

:root {
  /* Primair */
  --forest-green: #4A7C59;
  --warm-wood: #A67C52;
  --dark-wood: #6B4423;
  --pond-blue: #6B8E9F;

  /* Secundair */
  --sage-green: #87A96B;
  --olive-green: #6B8E23;
  --sepia: #A0522D;
  --cream: #F5DEB3;

  /* Accent */
  --mustard: #DAA520;
  --sky-blue: #87CEEB;
  --rust-orange: #CD853F;

  /* UI */
  --text-primary: #3E2723;
  --text-light: #FFF8DC;
  --panel-bg: #F5DEB3;
}

Kleur Do's en Don'ts​

Do's​

  • Gebruik kleuren uit dit palet voor consistentie
  • Combineer warme en koele tinten voor balans
  • Pas seizoenskleuren toe bij seizoensinhoud
  • Test op kleurenblindheid (Deuteranopia, Protanopia)
  • Behoud de warme, aardse sfeer

Don'ts​

  • Pure zwart (#000000) gebruiken
  • Neon of over-verzadigde kleuren
  • Koude, klinische kleuren
  • Hoge contrast neon combinaties
  • Kleuren buiten de stijl van de assets