Lyhyesti
- Aidolta näyttävä kultainen liukuväri kulkee syvän ruskeasta varjosta hillityn okran kautta vaalean kermanväriseen heijastukseen ja takaisin varjoon.
- Kulta näyttää oranssilta, kun värit ovat liian kylläisiä ja punaisia, ja tasaiselta keltaiselta ilman tummaa varjoa ja lähes valkoista heijastusta.
- Metallinen kulta perustuu kontrastiin: tummimman ja vaaleimman pysäkin kirkkauseron tulee olla suuri ja heijastuksen kapea.
- CSS:ssä kultateksti on lineaarinen kultaliukuväri, joka rajataan kirjaimiin background-clip: text -ominaisuudella.
- Kulta tuntuu arvokkaimmalta säästeliäästi käytettynä tummalla pohjalla, kuten mustalla, laivastonsinisellä tai syvällä vihreällä.
Tällä sivulla
Kultainen liukuväri näyttää aidolta metallilta, kun sen kirkkausalue on laaja: syvä ruskea varjo, hillitty okra, kapea vaalea kermanvärinen heijastus ja paluu ruskeaan. Klassinen lähtökoodi on linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418). Useimmat kultaliukuvärit epäonnistuvat käyttäessään kahta kirkasta keltaista ja oranssia ilman todellista varjoa tai heijastusta. Lopputulos näyttää oranssilta maalilta metallin sijaan.
Kopioitavat kultaliukuvärin koodit
Miksi kultainen liukuväri näyttää oranssilta
Näytöllä kulta on kontrastista syntyvä illuusio. Kultaista pikseliä ei ole, vain ruskeita ja keltaisia järjestettyinä niin, että silmä näkee heijastavan pinnan. Yleensä ongelma on jokin näistä neljästä.
Korjaus
Syy
Korjaus
Syy
Korjaus
Syy
Korjaus
Oranssi on yleisin ongelma, koska värivalitsimen keltainen näyttää usein liian vaalealta ja sitä lämmitetään liikaa. Vastusta houkutusta: pidä välisävy okran kohdalla, suunnilleen keltaisen ja ruskean rajalla, ja anna kontrastin tuoda kiilto. Jos haluat tavallisen lämpimän liukuvärin, keltainen liukuväri ja oranssi liukuväri käsittelevät niitä suoraan.
Valaise kulta aidon näköiseksi
- 1
Aloita varjosta
Valitse syvä, lämmin ruskea. Sen tulee olla niin tumma, että valkoinen teksti olisi luettavaa sen päällä.
- 2
Lisää yksi hillitty välisävy
Hieman vähäkylläinen okrankulta. Tämä väri jää mieleen, joten suurin osa pinnasta käyttää sitä.
- 3
Aseta kapea heijastus
Ohut vaalean kerman kaista sivussa keskeltä. Mitä kapeampi se on, sitä kiiltävämmältä metalli näyttää.
- 4
Palaa varjoon
Laske heijastuksen jälkeen tummempaan okraan, jolloin valo näyttää kaarevan pinnan heijastukselta.
- 5
Lisää toinen, heikompi heijastus
Halutessasi lisää pehmeämpi vaalennus kauempaan päähän, kuin toinen valo osuisi reunaan. Se saa litteät muodot tuntumaan pyöristetyiltä.
Kulta heijastaa kuten muutkin kiillotetut metallit, joten kromitekstiefektin periaatteet pätevät, vain lämpimämpinä ja pehmeämmin siirtyminä. Kultaliukuvärin pitkät, hienovaraiset siirtymät voivat raidoittua pakkauksessa. Liukuvärin raidoittuminen kertoo, miten hieno rakeisuus ehkäisee sitä.
Kultateksti CSS:llä
.gold {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 8vw, 6rem);
color: #c79a3c; /* fallback */
background: linear-gradient(
135deg,
#5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
#c79a3c 58%, #7a5418 80%, #d6b062 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-rule {
height: 2px;
border: 0;
background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}Kultaliukuvärit sopivat suurikokoiseen antiikvaan ja voimakkaan viivakontrastin kirjaimiin. Alle noin 24 pikselissä varjo ja heijastus sulautuvat tasaiseksi ruskeaksi. Käytä pienessä tekstissä tasaista kultasävyä, kuten #c79a3c, ja tarkista kontrasti taustaan. Liukuväriteksti kertoo rajauksen selaintuesta.
Kultaliukuvärit painossa
Kultaliukuväri on metallin kuva, ei metallia. Tavallinen neliväripaino tuottaa ruskeita ja keltaisia, jotka vihjaavat kiiltoon mutta eivät todella heijasta. Se sopii esitteisiin ja julisteisiin. Kutsuissa, käyntikorteissa ja pakkauksissa todelliseen kiiltoon käytetään metallivärejä tai foliopainatusta, ja kulta-alue toimitetaan erillisenä tasaisena muotona.
Painettu liukuväri on yleensä hieman näyttöä tummempi ja hillitympi. Kirkasta heijastusta vähän, vältä pitkiä hienovaraisia siirtymiä, jotka voivat raidoittua, ja pyydä vedos ennen suurta painosta.
Suunnittelu kullan kanssa
Kulta tuntuu arvokkaalta harvinaisena. Ohut reunus, monogrammi, yksi otsikkosana tai erotinviiva mustalla, laivastonsinisellä, häränverenpunaisella tai syvänvihreällä pohjalla riittää. Kokonaan kultainen juliste alkaa tuntua messinkiseltä. Musta ja kultainen liukuväri tarjoaa klassisia yhdistelmiä, ja luksusbrändin suunnittelu näyttää kullan osana hillittyä identiteettiä.
5×7 in kutsu: tumma pohja, lämmin metallinen valo ja rauhallinen kermanvärinen teksti.
Korujulkaisu, jossa kulta näkyy vain pinnan valona, ei suurena tasaisena täyttönä.
Kun haluat lämpimän ilmeen jokaiseen suunnitelmaan rakentamatta sitä aina uudelleen, hae Gradientlyn Markkinoilta esimerkiksi sanoilla ”warm gold” tai ”bronze”. Jokainen Mark on elävä tausta valoineen ja rakeisuuksineen. Sillä voi olla vain yksi omistaja kerrallaan, ja sen rauhallisin alue pysyy sanojesi takana jokaisessa koossa.
Usein kysyttyä
Mikä on hyvä kultaliukuvärin koodi?
Hyvä lähtökohta on linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418): ruskea varjo, okran välisävy, vaalea heijastus ja paluu varjoon.
Millä heksakoodeilla teen metallisen kullan?
Yhdistä tumma pronssi kuten #5c3d12, vanha kulta kuten #b8862b, metallinen kulta kuten #c79a3c ja vaalea heijastus kuten #f3dc9a.
Miksi kultaliukuvärini näyttää oranssilta?
Välisävyt ovat liian punaisia ja kylläisiä. Siirrä ne keltaokraan, vähennä kylläisyyttä ja lisää kontrastiksi tumma ruskea varjo ja vaalea kermanvärinen heijastus.
Miten teen kultatekstiä CSS:llä?
Aseta taustaksi lineaarinen kultaliukuväri ja käytä background-clip: text- ja -webkit-text-fill-color: transparent-ominaisuuksia sekä tasaista kultaista color-varaväriä.
Mikä väri sopii parhaiten kultaan?
Musta, laivastonsininen, syvä vihreä, häränverenpunainen ja lämmin kerma. Tummalla pohjalla kulta näyttää kirkkaimmalta ja arvokkaimmalta.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme