# Musta-kultainen liukuväri: tyylikkäät luksuskoodit [Canonical HTML page](https://gradiently.design/fi/guide/black-and-gold-gradient) Musta ja kulta ovat luksuksen pikakirjoitusta, mutta paletti näyttää helposti halvalta. Ero syntyy lähes aina kullan rakenteesta ja siitä, kuinka vähän sitä käytät. ## The short version - Musta-kultainen liukuväri yhdistää lähes mustan pohjan useasta väripisteestä tehtyyn kultaan: tyypillisesti tummaan pronssiin, lämpimään kultaan #d4af37 ja vaaleaan valokohtaan #f3e5ab. - Tasainen kulta näyttää näytöllä sinapilta, sillä oikea kulta tunnistetaan metalliksi vasta valon ja varjon vaihdellessa sen pinnalla. - Musta ja kulta näyttävät arvokkaimmilta, kun kultaa on vain pienessä osassa suunnitelmaa, kuten reunavalossa, viivassa tai tekstissä. - Kultainen teksti, kuten #d4af37, saavuttaa lähes mustalla noin 9:1-kontrastin ja sopii luettaviin otsikoihin sekä lyhyisiin riveihin. - Tavallisilla painoväreillä painettu kulta ei näytä metalliselta. Käytä foliota tai metalliväriä, kun aito vaikutelma on tärkeä. **Musta-kultainen liukuväri** yhdistää lähes mustan pohjan kultaan, joka rakentuu useasta väripisteestä yhden tasavärin sijaan: tummasta pronssista `#8a6d1f`, lämpimästä kullasta `#d4af37` ja vaaleasta valokohdasta `#f3e5ab`. Vaihtelu saa kullan näyttämään metallilta. Tyylikkäissä versioissa kultaa on myös paljon vähemmän kuin ehkä odotat, usein vain reunassa hohtava valo tai itse teksti. Tässä koodit, metallikultaisen tekstin CSS ja säännöt, joilla yhdistelmä säilyttää arvokkaan ilmeensä. ## Miksi tasainen kulta näyttää halvalta Kulta ei oikeastaan ole väri vaan materiaali. Tunnistat sen heijastusten kuviona: varjoissa tummaa oliivinruskeaa, keskisävyissä lämmintä keltaista ja valokohdissa lähes valkoista. Yksi hex-arvo tavoittaa vain yhden näistä, joten tasainen `#ffd700` näyttää keltaiselta tai sinapilta metallin sijaan. Vähintään kolmen väripisteen liukuväri tekee valon työn. - Sysimusta: #0a0a0a - Lämmin musta: #1a1408 - Pronssivarjo: #5c4813 - Antiikkikulta: #8a6d1f - Tumma kultapiisku: #b8860b - Metallikulta: #d4af37 - Hunaja: #e6c76a - Samppanja: #f3e5ab Kaksi mustaa ja kuusi kultaa. Uskottava metalli käyttää tästä asteikosta vähintään kolmea kultaa, ei vain yhtä. ## Metallikultaisen liukuvärin koodit Nämä ovat itse kultatäytöt viivaan, tunnukseen, monogrammiin tai liukuväritekstiin. Jokainen kulkee tummasta vaaleaan ja takaisin tummaan, mikä luo vaikutelman kaarevasta kiillotetusta pinnasta, joka nappaa valon. - Kiillotettu kulta: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)` - Ylhäältä valaistu kulta: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)` - Antiikkikultaharkko: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)` - Harjattu samppanja: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)` Metallikultaiset täytöt. Symmetria, tummat päät ja kirkas keskikohta, näyttää kaarevalta pinnalta. ## Musta-kultaiset liukuväritaustat Käännä taustassa mittasuhteet: musta tekee lähes kaiken työn, ja kulta näkyy hohteena, horisonttina tai hentona lämpönä yhdessä kulmassa. Lämmin, hieman ruskeaan taittuva musta sopii kultaan paremmin kuin puhdas tai sinertävä musta. - Kultavalo kulmassa: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)` - Kultainen horisontti: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)` - Näyttämön alavalo: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)` - Kultainen reuna: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)` Musta-kultaiset taustat. Jokaisessa kulta peittää selvästi alle neljänneksen kuvasta. Tummat liukuvärit raidoittuvat muita helpommin, ja kultainen hohde mustalla on lähes pahin tapaus. Hieno raekerros korjaa ongelman ja saa samalla pinnan tuntumaan paperilta tai sametilta. Lisää pohjia löydät oppaasta [mustat liukuvärit](https://gradiently.design/fi/guide/black-gradient). ## Näin pidät mustan ja kullan tyylikkäinä ### Halpa vaikutelma - Tasainen keltainen kulta, kuten `#ffd700` - Kulta peittää puolet suunnitelmasta - Kultaiset hohtokehät jokaisen sanan takana - Kulta puhtaalla sinimustalla - Koristeellinen kaunokirjoitus, kulta ja viisteet yhtä aikaa ### Arvokas vaikutelma - Kulta vähintään kolmesta väripisteestä - Kulta yhdessä paikassa: valossa, viivassa tai nimessä - Selkeä väljä teksti ilman tehosteita - Kulta lämpimällä mustalla - Yksi elegantti kirjasin ja väljät marginaalit Koko niksi on hillitty käyttö. Luksuspakkauksissa on usein paljon tyhjää tummaa tilaa ja vähän metallia, jolloin metalli tuntuu arvokkaalta. Sama pätee näytöllä. [Ylelliset väripaletit](https://gradiently.design/fi/guide/luxury-color-palettes) ja [luksusdesign](https://gradiently.design/fi/guide/luxury-design) käsittelevät laajempaa visuaalista kieltä. ## Kultainen teksti mustalla liukuvärillä Kulta erottuu hyvin mustalla. Alla olevat luvut käyttävät WCAG-kontrastikaavaa. Tavallinen vähimmäisarvo pienelle tekstille on 4,5:1 ja suurille otsikoille 3:1. Käytä tummempia antiikkikultia viivoihin ja reunuksiin, älä sanoihin. | Tausta | Teksti | Kontrasti | Käyttökohde | | --- | --- | --- | --- | | Sysimusta `#0a0a0a` | Metallikulta `#d4af37` | 9,4:1 | Otsikot ja lyhyet rivit | | Sysimusta `#0a0a0a` | Tumma kultapiisku `#b8860b` | 6,1:1 | Väliotsikot ja tunnisteet | | Lämmin musta `#14110a` | Kulta `#c9a227` | 7,8:1 | Otsikot | | Lämmin musta `#1a1408` | Samppanja `#f3e5ab` | 14,5:1 | Leipäteksti | | Sysimusta `#0a0a0a` | Antiikkikulta `#8a6d1f` | 4,0:1 | Vain suuri teksti tai viivat | Pitkää tekstiä on miellyttävämpi lukea samppanjanvärisenä kuin kylläisen kullan sävyisenä. Metallinen liukuväriteksti toimii yhdelle sanalle tai lyhyelle nimelle. Alla oleva CSS rajaa kiillotetun kultaliukuvärin kirjaimiin ja säilyttää tasaisen kultavärin varavaihtoehtona. [CSS-liukuväriteksti](https://gradiently.design/fi/guide/css-gradient-text) käsittelee saavutettavuutta. ```css .luxe { background-color: #0a0a0a; background-image: radial-gradient(circle at 80% 15%, #5c4813 0%, #1a1408 35%, #0a0a0a 75%); color: #f3e5ab; } .luxe h1 { color: #d4af37; /* fallback */ background: linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.04em; } ``` Lämpimän musta osio, jossa on hento kultavalo, samppanjanvärinen leipäteksti ja kiillotetun kultainen otsikko. Korupystypostaus, jossa on vaaleankultainen teksti lämpimän mustalla taustalla ja yhdessä kulmassa hento kultainen hohde Kultasepän postaus: lämmin musta, yksi kultavalo ja selkeä teksti. Pysty uudenvuodenaaton tarina, jossa samppanjanvärinen teksti on mustalla ja tausta häipyy alhaalla kultaiseen horisonttiin Uudenvuodenaaton tarina, jonka alareunassa on kultainen horisontti. ## Musta ja kulta painossa Tavallinen neliväripainatus ei toista metallia. CMYK:na painettu kultaliukuväri näyttää ruskeankeltaiselta, vaikka rakentaisit sen kuinka huolellisesti. Kutsuissa, käyntikorteissa ja pakkauksissa, joissa kulta on tärkeä, käytä kultaisiin osiin kuumafoliota tai metalliväriä ja jätä liukuväri näytölle. [Liukuvärit painossa](https://gradiently.design/fi/guide/print-gradients) esittelee vaihtoehdot, ja [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) selittää näytön ja paperin eron. ## Missä käytät mustaa ja kultaa Musta ja kulta sopivat koruihin, kelloihin, tuoksuihin, väkeviin juomiin, hotelleihin, partureihin, juhlapukutilaisuuksiin ja uuteenvuoteen. Ne sopivat myös syviin viininpunaisiin: katso [viininpunaiset liukuvärit](https://gradiently.design/fi/guide/maroon-gradient). Jos haluat tumman lämpimän ilmeen, joka on vain sinun, Gradientlyn Mark on värien, materiaalien, valon ja rakeen resepti tasaisen täytön sijaan. Jokaisella Markilla on kerrallaan yksi omistaja. Kun lunastat sen, kilpailija ei voi viedä sillä sisältöä. ## FAQ ### Mikä on metallikullan hex-koodi? Yleisesti käytetty metallikulta on `#d4af37`. Uskottavaan metalliin yhdistä se liukuvärissä tummaan pronssiin, kuten `#8a6d1f`, ja vaaleaan valokohtaan, kuten `#f3e5ab`. ### Miten teen kultaisen liukuvärin CSS:llä? Käytä symmetristä lineaarista liukuväriä, joka kulkee tummasta kirkkaaseen, valokohtaan, kirkkaaseen ja tummaan. Esimerkiksi `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`. ### Onko kultainen teksti mustalla luettavaa? Kyllä. Metallikulta `#d4af37` saavuttaa lähes mustalla noin 9:1-kontrastin. Pitkiin teksteihin vaaleampi samppanjakulta on miellyttävämpi. ### Miksi musta-kultainen suunnitelmani näyttää halvalta? Yleensä kulta on yksi tasainen keltainen, sitä on liikaa tai siinä on hohteita ja viisteitä. Rakenna kulta useasta väripisteestä ja käytä sitä yhdessä paikassa. ### Voinko painaa musta-kultaisen liukuvärin? Voit, mutta CMYK-kulta näyttää ruskeankeltaiselta, ei metalliselta. Käytä foliota tai metalliväriä, jos kullan pitää kiiltää.