{ "componentChunkName": "component---src-templates-doc-template-js", "path": "/tr/docs/colors", "result": {"data":{"current":{"fields":{"page":{"path":"/docs/colors","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Colors","markdown":"\nWe have listed below the information regarding the color groups and color tones we used.\n\nIf you want to use our color variables, just import the relevant `scss` file.\n\n```scss\n@import 'gralig/scss/abstracts/_variables.scss';\n```\n\n## Gray\n\n
\n
\n
\n
\n
\n
Abbey
\n
\n

HSL: hsl(206, 7%, 40%)

\n

SCSS: $abbey

\n
\n
\n
\n
\n
\n
\n
\n
\n
Raven
\n
\n

HSL: hsl(205, 7%, 48%)

\n

SCSS: $raven

\n
\n
\n
\n
\n
\n
\n
\n
\n
Oslo
\n
\n

HSL: hsl(204, 7%, 58%)

\n

SCSS: $oslo

\n
\n
\n
\n
\n
\n
\n
\n
\n
Mischka
\n
\n

HSL: hsl(207, 7%, 68%)

\n

SCSS: $mischka

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Ghost
\n
\n

HSL: hsl(202, 7%, 78%)

\n

SCSS: $ghost

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Iron
\n
\n

HSL: hsl(204, 7%, 86%)

\n

SCSS: $iron

\n
\n
\n
\n
\n
\n
\n
\n
\n
Porcelain
\n
\n

HSL: hsl(210, 8%, 95%)

\n

SCSS: $porcelain

\n
\n
\n
\n\n## Dark\n\n
\n
\n
\n
\n
\n
Blackpearl
\n
\n

HSL: \thsl(206, 20%, 7%)

\n

SCSS: $blackpearl

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Woodsmoke
\n
\n

HSL: hsl(200, 7%, 8%)

\n

SCSS: $woodsmoke

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Shark
\n
\n

HSL: hsl(207, 13%, 14%)

\n

SCSS: $shark

\n
\n
\n
\n\n## Blue\n\n
\n
\n
\n
\n
\n
Summer Darker
\n
\n

HSL: hsl(201, 66%, 38%)

\n

SCSS: $summer-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer Dark
\n
\n

HSL: hsl(201, 66%, 46%)

\n

SCSS: $summer-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer
\n
\n

HSL: hsl(201, 66%, 54%)

\n

SCSS: $summer

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer Light
\n
\n

HSL: hsl(201, 66%, 62%)

\n

SCSS: $summer-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer Lighter
\n
\n

HSL: hsl(201, 66%, 70%)

\n

SCSS: $summer-lighter

\n
\n
\n
\n\n## Green\n\n
\n
\n
\n
\n
\n
Shamrock Darker
\n
\n

HSL: hsl(166, 66%, 38%)

\n

SCSS: $shamrock-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock Dark
\n
\n

HSL: hsl(166, 66%, 46%)

\n

SCSS: $shamrock-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock
\n
\n

HSL: hsl(166, 66%, 54%)

\n

SCSS: $shamrock

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock Light
\n
\n

HSL: hsl(166, 66%, 62%)

\n

SCSS: $shamrock-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock Lighter
\n
\n

HSL: hsl(166, 66%, 70%)

\n

SCSS: $shamrock-lighter

\n
\n
\n
\n\n## Yellow\n\n
\n
\n
\n
\n
\n
Tulip Darker
\n
\n

HSL: hsl(47, 82%, 38%)

\n

SCSS: $tulip-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip Dark
\n
\n

HSL: hsl(47, 82%, 46%)

\n

SCSS: $tulip-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip
\n
\n

HSL: hsl(47, 82%, 54%)

\n

SCSS: $tulip

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip Light
\n
\n

HSL: hsl(47, 82%, 62%)

\n

SCSS: $tulip-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip Lighter
\n
\n

HSL: hsl(47, 82%, 70%)

\n

SCSS: $tulip-lighter

\n
\n
\n
\n\n## Red\n\n
\n
\n
\n
\n
\n
Flame Darker
\n
\n

HSL: hsl(0, 66%, 38%)

\n

SCSS: $flame-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame Dark
\n
\n

HSL: hsl(0, 66%, 46%)

\n

SCSS: $flame-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame
\n
\n

HSL: hsl(0, 66%, 54%)

\n

SCSS: $flame

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame Light
\n
\n

HSL: hsl(0, 66%, 62%)

\n

SCSS: $flame-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame Lighter
\n
\n

HSL: hsl(0, 66%, 70%)

\n

SCSS: $flame-lighter

\n
\n
\n
","mdtype":"MDHTML","section":"colors"},{"lang":"tr","title":"Renkler","markdown":"\nKullandığımız renk grupları ve renk tonlarına ilişkin bilgileri aşağıda sıraladık.\n\nEğer renk değişkenlerini kullanmak isterseniz ilgili `scss` dosyasını import etmeniz yeterli.\n\n```scss\n@import 'gralig/scss/abstracts/_variables.scss';\n```\n\n## Gri\n\n
\n
\n
\n
\n
\n
Abbey
\n
\n

HSL: hsl(206, 7%, 40%)

\n

SCSS: $abbey

\n
\n
\n
\n
\n
\n
\n
\n
\n
Raven
\n
\n

HSL: hsl(205, 7%, 48%)

\n

SCSS: $raven

\n
\n
\n
\n
\n
\n
\n
\n
\n
Oslo
\n
\n

HSL: hsl(204, 7%, 58%)

\n

SCSS: $oslo

\n
\n
\n
\n
\n
\n
\n
\n
\n
Mischka
\n
\n

HSL: hsl(207, 7%, 68%)

\n

SCSS: $mischka

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Ghost
\n
\n

HSL: hsl(202, 7%, 78%)

\n

SCSS: $ghost

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Iron
\n
\n

HSL: hsl(204, 7%, 86%)

\n

SCSS: $iron

\n
\n
\n
\n
\n
\n
\n
\n
\n
Porcelain
\n
\n

HSL: hsl(210, 8%, 95%)

\n

SCSS: $porcelain

\n
\n
\n
\n\n## Koyu\n\n
\n
\n
\n
\n
\n
Blackpearl
\n
\n

HSL: \thsl(206, 20%, 7%)

\n

SCSS: $blackpearl

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Woodsmoke
\n
\n

HSL: hsl(200, 7%, 8%)

\n

SCSS: $woodsmoke

\n
\n
\n
\n\n
\n
\n
\n
\n
\n
Shark
\n
\n

HSL: hsl(207, 13%, 14%)

\n

SCSS: $shark

\n
\n
\n
\n\n## Mavi\n\n
\n
\n
\n
\n
\n
Summer Darker
\n
\n

HSL: hsl(201, 66%, 38%)

\n

SCSS: $summer-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer Dark
\n
\n

HSL: hsl(201, 66%, 46%)

\n

SCSS: $summer-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer
\n
\n

HSL: hsl(201, 66%, 54%)

\n

SCSS: $summer

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer Light
\n
\n

HSL: hsl(201, 66%, 62%)

\n

SCSS: $summer-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Summer Lighter
\n
\n

HSL: hsl(201, 66%, 70%)

\n

SCSS: $summer-lighter

\n
\n
\n
\n\n## Yeşil\n\n
\n
\n
\n
\n
\n
Shamrock Darker
\n
\n

HSL: hsl(166, 66%, 38%)

\n

SCSS: $shamrock-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock Dark
\n
\n

HSL: hsl(166, 66%, 46%)

\n

SCSS: $shamrock-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock
\n
\n

HSL: hsl(166, 66%, 54%)

\n

SCSS: $shamrock

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock Light
\n
\n

HSL: hsl(166, 66%, 62%)

\n

SCSS: $shamrock-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Shamrock Lighter
\n
\n

HSL: hsl(166, 66%, 70%)

\n

SCSS: $shamrock-lighter

\n
\n
\n
\n\n## Sarı\n\n
\n
\n
\n
\n
\n
Tulip Darker
\n
\n

HSL: hsl(47, 82%, 38%)

\n

SCSS: $tulip-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip Dark
\n
\n

HSL: hsl(47, 82%, 46%)

\n

SCSS: $tulip-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip
\n
\n

HSL: hsl(47, 82%, 54%)

\n

SCSS: $tulip

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip Light
\n
\n

HSL: hsl(47, 82%, 62%)

\n

SCSS: $tulip-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Tulip Lighter
\n
\n

HSL: hsl(47, 82%, 70%)

\n

SCSS: $tulip-lighter

\n
\n
\n
\n\n## Kırmızı\n\n
\n
\n
\n
\n
\n
Flame Darker
\n
\n

HSL: hsl(0, 66%, 38%)

\n

SCSS: $flame-darker

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame Dark
\n
\n

HSL: hsl(0, 66%, 46%)

\n

SCSS: $flame-dark

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame
\n
\n

HSL: hsl(0, 66%, 54%)

\n

SCSS: $flame

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame Light
\n
\n

HSL: hsl(0, 66%, 62%)

\n

SCSS: $flame-light

\n
\n
\n
\n
\n
\n
\n
\n
\n
Flame Lighter
\n
\n

HSL: hsl(0, 66%, 70%)

\n

SCSS: $flame-lighter

\n
\n
\n
","mdtype":"MDHTML","section":"colors"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/colors/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/colors","redirect":false,"defaultLanguage":"en"}}}, "staticQueryHashes": ["63159454"]}