# Kultainen liukuväri: aidon metallin värikoodit

[Canonical HTML page](https://gradiently.design/fi/guide/gold-gradient-design)

Digitaalinen kulta näyttää usein appelsiinimehulta tai sinapilta. Aidossa kullassa on lähinnä ruskeaa varjoa, vähän okraa ja yksi vaalea valovälähdys. Näillä koodeilla ja periaatteilla onnistut.

## The short version

- 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ä.

**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

- Klassinen kulta: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Samppanjakulta: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Ruusukulta: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Antiikkikulta: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Kirkas kultafolio: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Kultainen valo mustalla: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Kuusi kultaa, jokaisessa tumma varjo ja kapea vaalea heijastus. Viisi ensimmäistä sopivat tekstiin, reunuksiin ja muotoihin; viimeinen on tausta.

- Varjopronssi: #5c3d12
- Syvä okra: #7a5418
- Vanha kulta: #b8862b
- Metallinen kulta: #c79a3c
- Vaalea heijastus: #f3dc9a
- Kermanvärinen kiilto: #fff6dc

Klassisen kullan värikoodit varjosta heijastukseen sekä kermanvärinen kiilto, jota käytetään vain ohuena kaistaleena, jos lainkaan.

## 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ä.

| Ulkoasu | Syy | Korjaus |
| --- | --- | --- |
| Oranssi | Välisävyt liian punaisia ja kylläisiä | Siirrä sävyjä keltaokraan ja vähennä kylläisyyttä |
| Tasainen keltainen | Ei tummaa varjoa eikä vaaleaa heijastusta | Lisää ruskea pysäkki päiden lähelle ja kermanvärinen keskelle |
| Ruskea tai samea | Liian tumma heijastus, liikaa himmeitä pysäkkejä | Nosta heijastus lähes kermanväriseksi ja kavenna tummia alueita |
| Vihertävä | Liian viileät keltaiset ja harmaat varjot | Lämmitä varjot ruskeiksi oliivin tai harmaan sijaan |

Neljä tavallista kultaongelmaa ja niiden korjaukset.

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](https://gradiently.design/fi/guide/yellow-gradient) ja [oranssi liukuväri](https://gradiently.design/fi/guide/orange-gradient) 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](https://gradiently.design/fi/guide/chrome-effect) 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](https://gradiently.design/fi/guide/gradient-banding) kertoo, miten hieno rakeisuus ehkäisee sitä.

## Kultateksti CSS:llä

```css
.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);
}
```

Kultainen otsikkoteksti ja ohut kultainen erotin. Varaväri näkyy siellä, missä liukuvärin rajausta ei tueta.

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](https://gradiently.design/fi/guide/css-gradient-text) 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](https://gradiently.design/fi/guide/black-and-gold-gradient) tarjoaa klassisia yhdistelmiä, ja [luksusbrändin suunnittelu](https://gradiently.design/fi/guide/luxury-design) näyttää kullan osana hillittyä identiteettiä.

Pystysuuntainen gaalakutsu tummalla taustalla, lämmintä kultavaloa ja kermanvärinen teksti

5×7 in kutsu: tumma pohja, lämmin metallinen valo ja rauhallinen kermanvärinen teksti.

Pystysuuntainen korujulkaisu, lyhyt lause syvällä pinnalla ja ripaus kultaista valoa

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.

## FAQ

### 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.