Template:Ink card: Difference between revisions

From stencil.wiki
VisualWikitext
m (IssuePress moved page Template:Ink card to Template:Color ramp)
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 11: Line 11:


===Advanced===
===Advanced===
You can also use this template to pull in full categories of inks, such as all [[:Category:Riso inks|Riso inks]]:
You can also use this template to pull in full categories of inks, such as all Standard-series [[:Category:Riso inks|Riso inks]]:
<pre>
<pre>
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
  [[Has series::Standard]]
   |format=plainlist
   |format=plainlist
   |headers=hide
   |headers=hide
Line 21: Line 22:
</pre>
</pre>
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
  [[Has series::Standard]]
   |format=plainlist
   |format=plainlist
   |headers=hide
   |headers=hide
Line 27: Line 29:
}}|Ink card|,|}}
}}|Ink card|,|}}
</noinclude>
</noinclude>
<includeonly><div class="ink-card-wrapper text-{{#ifexpr:{{#rmatch:{{#invoke:Color|hexToCielch|{{#invoke:Color|rgbTripletToHex|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$1|}}|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$2|}}|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$3|}}}}}}|/^([0-9]{1,3})/|$1}}>75|black|white}}" style="position:relative; margin-bottom:.25rem;">
<includeonly><div class="ink-card-wrapper" style="position:relative; margin-bottom: 1rem; background: #f8f9fa;border-radius:.75rem; overflow: hidden;border: 1px solid #F1F3F5;">
  <div class="color-ramp" style="background-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1); display: flex; flex-direction:row; width:100; height: 45px; border-radius:.5rem; overflow: hidden;">
  <div class="color-ramp text-{{#ifexpr:{{#invoke:Color|csvrgbToLum|{{#show: {{{1}}} |? Has rgb#}}}}>75|black|white}}" style="background-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1); display: flex; flex-direction:row; width:100%;box-sizing: border-box;">
     <div class="p100" style="width:55%;display: inline-flex; align-items:flex-end; justify-content: space-between; padding: .25rem .5rem .25rem .75rem;"><span class="title" style="font-size: 1.5rem;">[[{{{1}}}]]</span>
     <div class="p100" style="width:55%;display: inline-flex; align-items:center; justify-content: flex-start; padding: 1rem;"><span class="title" style="font-size: 1.25rem; line-height: 1.25rem;">[[{{{1}}}]]</span></div>
<span>100%</span></div>
     <div class="p75" style="width:15%; background-color: rgba(250,250,250,.25);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem"><span style="font-size: .75rem; line-height: .75rem;">75%</span></div>
     <div class="p75" style="width:15%; background-color: rgba(250,250,250,.25);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>75%</span></div>
     <div class="p50" style="width:15%; background-color: rgba(250,250,250,.5);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem;"><span style="font-size: .75rem; line-height: .75rem;">50%</span></div>
     <div class="p50" style="width:15%; background-color: rgba(250,250,250,.5);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>50%</span></div>
     <div class="p25" style="width:15%;background-color: rgba(250,250,250,.75);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem;"><span style="font-size: .75rem; line-height: .75rem;">25%</span></div>
     <div class="p25" style="width:15%;background-color: rgba(250,250,250,.75);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>25%</span></div>
   </div>{{#if:{{#show:{{{1}}}|?Has hex#}}{{#show:{{{1}}}|?Has rgb#}}{{#show:{{{1}}}|?Has cmyk#}}|<div class="color-metadata" style="color: #8a8a8a; padding:.875rem 1rem; display: flex; gap:1rem; font-size:.75rem; border-top: 1px solid #F1F3F5;">{{#if:{{#show:{{{1}}}|?Has hex#}}|<span><strong>HEX:</strong> <code style="white-space: nowrap;"><nowiki>#</nowiki>{{uc:{{#show:{{{1}}}|?Has hex#}}}}</code></span>}}{{#if:{{#show:{{{1}}}|?Has rgb#}}|<span><strong>RGB:</strong> <code style="white-space: nowrap;">({{#rreplace:{{#show:{{{1}}}|?Has rgb#}}|,|, }})</code></span>}}{{#if:{{#show:{{{1}}}|?Has cmyk#}}|<span><strong>CMYK:</strong> <code style="white-space: nowrap;">({{#rreplace:{{#show:{{{1}}}|?Has cmyk#}}|,|, }})</code></span>}}</div>}}</div>
   </div>
</div>
</includeonly>
</includeonly>

Latest revision as of 15:38, 11 December 2024

A template for displaying inks as simple color ramps.

Usage

Simple

{{Ink card|Burgundy}}
Burgundy
75%
50%
25%
HEX: #914E72RGB: (145, 78, 114)CMYK: (24, 94, 1, 21)


Advanced

You can also use this template to pull in full categories of inks, such as all Standard-series Riso inks: 

{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
  [[Has series::Standard]]
  |format=plainlist
  |headers=hide
  |link=none
  |limit=100
}}|Ink card|,|}}
Black
75%
50%
25%
HEX: #000000RGB: (0, 0, 0)CMYK: (0, 0, 0, 100)
Blue
75%
50%
25%
HEX: #0078BFRGB: (0, 120, 191)CMYK: (99, 22, 0, 1)
Brick
75%
50%
25%
HEX: #A75154RGB: (167, 81, 84)CMYK: (8, 85, 59, 18)
Bright Red
75%
50%
25%
HEX: #F15060RGB: (241, 80, 96)CMYK: (0, 67, 60, 5)
Brown
75%
50%
25%
HEX: #925F52RGB: (146, 95, 82)CMYK: (18, 62, 84, 23)
Burgundy
75%
50%
25%
HEX: #914E72RGB: (145, 78, 114)CMYK: (24, 94, 1, 21)
Flat Gold
75%
50%
25%
HEX: #BB8B41RGB: (187, 139, 65)CMYK: (6, 26, 97, 15)
Fluorescent Pink
75%
50%
25%
HEX: #FF48B0RGB: (255, 72, 176)CMYK: (0, 72, 31, 0)
Granite
75%
50%
25%
HEX: #A5AAA8RGB: (165, 170, 168)CMYK: (36, 22, 30, 2)
Green
75%
50%
25%
HEX: #00A95CRGB: (0, 169, 92)CMYK: (73, 0, 81, 0)
Hunter Green
75%
50%
25%
HEX: #407060RGB: (64, 112, 96)CMYK: (96, 7, 80, 33)
Light Gray
75%
50%
25%
HEX: #88898ARGB: (136, 137, 138)CMYK: (25, 17, 15, 44)
Marine Red
75%
50%
25%
HEX: #D2515ERGB: (210, 81, 94)CMYK: (1, 91, 72, 3)
Medium Blue
75%
50%
25%
HEX: #3255A4RGB: (50, 85, 164)CMYK: (87, 59, 0, 0)
Orange
75%
50%
25%
HEX: #FF6C2FRGB: (255, 108, 47)CMYK: (0, 58, 82, 0)
Purple
75%
50%
25%
HEX: #765BA7RGB: (118, 91, 167)CMYK: (61, 73, 0, 0)
Red
75%
50%
25%
HEX: #FF665ERGB: (255, 102, 94)CMYK: (0, 60, 63, 0)
Riso-Federal Blue
75%
50%
25%
HEX: #3D5588RGB: (61, 85, 136)CMYK: (100, 65, 1, 17)
Teal
75%
50%
25%
HEX: #00838ARGB: (0, 131, 138)CMYK: (100, 1, 40, 7)
Violet
75%
50%
25%
HEX: #9D7AD2RGB: (157, 122, 210)CMYK: (40, 51, 0, 0)
Yellow
75%
50%
25%
HEX: #FFE800RGB: (255, 232, 0)CMYK: (0, 9, 100, 0)


Retrieved from "https://new.stencil.wiki/w/index.php?title=Template:Ink_card&oldid=1680"