Creating Your Lovely Color Scheme

30a0fa53945400e145718f57155869d3?s=47 cocopon
November 04, 2017

Creating Your Lovely Color Scheme

Color schemes occupy an important part in your life. This talk will explain how to create your lovely color scheme for Vim, and will introduce some useful tools.

VimConf 2017 — International Vim Conference:
http://vimconf.vim-jp.org/2017/

Iceberg — Dark blue color scheme for Vim:
https://github.com/cocopon/iceberg.vim

colorswat.ch — Collection of color schemes for Vim:
http://colorswat.ch/

30a0fa53945400e145718f57155869d3?s=128

cocopon

November 04, 2017
Tweet

Transcript

  1. Creating Your Lovely Color Scheme Hiroki Kokubun (@cocopon), #vimconf2017

  2. About me

  3. cocopon Developer/Designer

  4. Creating mobile apps... http://cocopon.me/works/llumino/

  5. And digital arts... http://sushipi.co/

  6. And some Vim plugins https://github.com/cocopon/

  7. How about you? I love color schemes!

  8. Jellybeans This is the first color scheme I met

  9. hybrid After a while I loved this new color scheme

    so much
  10. And finally I created my own one

  11. Iceberg https://github.com/cocopon/iceberg.vim

  12. Ah...beautiful... I really love the universe of texts and colors

  13. Color scheme is very IMPORTANT

  14. If you are a programmer... 8.0h: Sleeping 8.0h: Working =

    Coding = Looking your color scheme 8.0h: Spending time with your family or enjoying time for hobbies
  15. 33% of your life is color scheme 8.0h: Sleeping 8.0h:

    Working = Coding = Looking your color scheme 8.0h: Spending time with your family or enjoying time for hobbies 33% 33% 33% * Source: ME
  16. Agenda What is color scheme? ····················· How to create a

    color scheme? ············· How to create your lovely color scheme? ··· Make your color scheme more lovely ········ How to find great forerunners? ············ Inside colorswat.ch ·······················
  17. What is color scheme?

  18. Before learning about color schemes,
 we need to know about

    Syntax and Highlighting
  19. Syntax Syntax extracts syntax groups for highlighting help.txt For Vim

    version 8.0. Last change: 2016 Sep 12 VIM - main help file k Move around: Use the cursor keys, or "h" to go left, h l "j" to go down, "k" to go up, "l" to go right. j Close this window: Use ":q<Enter>". Get out of Vim: Use ":qa!<Enter>" (careful, all changes are lost!). Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-]. With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI). Double-click the left mouse button on a tag, e.g. bars. Jump back: Type CTRL-T or CTRL-O. Repeat to go further back. Get specific help: It is possible to go directly to whatever you want help on, by giving an argument to the :help command. Prepend something to specify the context: help-context WHAT PREPEND EXAMPLE Normal mode command :help x :help
  20. help.txt For Vim version 8.0. Last change: 2016 Sep 12

    VIM - main help file k Move around: Use the cursor keys, or "h" to go left, h l "j" to go down, "k" to go up, "l" to go right. j Close this window: Use ":q<Enter>". Get out of Vim: Use ":qa!<Enter>" (careful, all changes are lost!). Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-]. With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI). Double-click the left mouse button on a tag, e.g. bars. Jump back: Type CTRL-T or CTRL-O. Repeat to go further back. Get specific help: It is possible to go directly to whatever you want help on, by giving an argument to the :help command. Prepend something to specify the context: help-context WHAT PREPEND EXAMPLE Normal mode command :help x Syntax groups helpVim helpHyperTextJump helpSpecial :help
  21. Syntax file * Syntax is defined by syntax file *

    Syntax file extracts syntax groups from buffer using pattern and some other rules ... " Group name Pattern etc. " ------------------ ---------------------------------------- syn match helpSpecial "\<N\>" syn match helpHyperTextJump "\\\@<!|[^"*|]\+|" contains=helpBar syn match helpHyperTextEntry "\*[^"*|]\+\*\s"he=e-1 contains=helpStar ... Syntax file: $VIMRUNTIME/syntax/help.vim
  22. Highlighting Highlighting is appearance information for syntax groups help.txt For

    Vim version 8.0. Last change: 2016 Sep 12 VIM - main help file k Move around: Use the cursor keys, or "h" to go left, h l "j" to go down, "k" to go up, "l" to go right. j Close this window: Use ":q<Enter>". Get out of Vim: Use ":qa!<Enter>" (careful, all changes are lost!). Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-]. With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI). Double-click the left mouse button on a tag, e.g. bars. Jump back: Type CTRL-T or CTRL-O. Repeat to go further back. Get specific help: It is possible to go directly to whatever you want help on, by giving an argument to the :help command. Prepend something to specify the context: help-context WHAT PREPEND EXAMPLE Normal mode command :help x helpVim helpSpecial :help helpHyperTextJump Normal
  23. Highlighting Highlighting is appearance information for syntax groups help.txt For

    Vim version 8.0. Last change: 2016 Sep 12 VIM - main help file k Move around: Use the cursor keys, or "h" to go left, h l "j" to go down, "k" to go up, "l" to go right. j Close this window: Use ":q<Enter>". Get out of Vim: Use ":qa!<Enter>" (careful, all changes are lost!). Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-]. With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI). Double-click the left mouse button on a tag, e.g. bars. Jump back: Type CTRL-T or CTRL-O. Repeat to go further back. Get specific help: It is possible to go directly to whatever you want help on, by giving an argument to the :help command. Prepend something to specify the context: help-context WHAT PREPEND EXAMPLE Normal mode command :help x helpVim foreground: #89b8c2 helpHyperTextJump foreground: #a093c7 helpSpecial foreground: #b4be82 :help Normal background: #161821 foreground: #c6c8d1
  24. Highlighting and for other UI components (= default highlighting groups)

    CursorLineNr Cursor LineNr VertSplit StatusLineNC PmenuThumb Pmenu StatusLine
  25. Type :hi in your Vim!

  26. These are highlighting groups for your current buffer-----

  27. So, color scheme is...

  28. ╭─────────────╮ ╭───────────────╮ │ Syntax file │ │ Color scheme │

    ╰─────────────╯ ╰───────┬───────╯ │ :syn │ :hi ╭─────────────╮ ▼ ╭──────────────────────────╮ │ ╭────────────────────────╮ │ Buffer text │───*───▶│ Syntax groups │ │ │ Highlightings │ ╰─────────────╯ │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │ ▼ │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │ │ · jsComment │───*───▶ · #6b7089 │ │ · jsFunction │───*───▶ · #e2a478 │ │ · jsExport │───*───▶ · #84a0c6 │ │ ┊ │ ┊ │ ┊ │ ╰──────────────────────────╯ │ │ │ ╭──────────────────────────╮ │ │ │ │ Other UI components │ │ │ │ │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │ ▼ │ │ │ · Cursor │───*───▶ · #c6c8d1, #161821 │ │ · StatusLine │───*───▶ · #17171b, #818596 │ │ · VertSplit │───*───▶ · #0f1117, #0f1117 │ │ ┊ │ │ ┊ │ ╰──────────────────────────╯ ╰────────────────────────╯ ... a set of highlight definitions for syntax groups and other UI components
  29. Color scheme is a set of highlighting definitions for syntax

    groups and other UI components
  30. How to create a color scheme?

  31. guibg is for background color, guifg is for foreground color

    (for 24-bit color environments) Define highlighting groups Use :hi command :hi! Normal guibg=#161821 guifg=#c6c8d1 key value group name overwrite existing defs
  32. ...and more highlighting groups ... hi! ColorColumn guibg=#1e2132 hi! CursorColumn

    guibg=#1e2132 hi! CursorLine guibg=#1e2132 hi! Comment guifg=#6b7089 hi! Constant guifg=#a093c7 hi! Cursor guibg=#c6c8d1 guifg=#161821 hi! CursorLineNr guibg=#2a3158 guifg=#cdd1e6 hi! Delimiter guifg=#c6c8d1 hi! DiffAdd guibg=#45493e guifg=#c0c5b9 hi! DiffChange guibg=#384851 guifg=#b3c3cc hi! DiffDelete guibg=#53343b guifg=#ceb0b6 hi! DiffText guibg=#5b7881 guifg=#c6c8d1 hi! Directory guifg=#89b8c2 hi! Error guibg=#161821 guifg=#e27878 hi! ErrorMsg guibg=#161821 guifg=#e27878 hi! WarningMsg guibg=#161821 guifg=#e27878 hi! EndOfBuffer guibg=#161821 guifg=#242940 hi! NonText guibg=#161821 guifg=#242940 hi! SpecialKey guibg=#161821 guifg=#242940
  33. Add CHARM before definitions " Support only 256 or full

    colors if !has('gui_running') && &t_Co < 256 finish endif " Set appropriate background set background=dark " Reset existing highlightings and syntax hi clear if exists('syntax_on') syntax reset endif " Name of the color scheme let g:colors_name = 'iceberg' hi! ... hi! ... hi! ...
  34. That’s all! Very easy?

  35. None
  36. No... :(

  37. There are still a lot of things to do *

    Cover whole highlighting groups * Consider coloration * Support 256 colors * Support various plugins * ...
  38. Creating a color scheme is easy But, creating a lovely

    one is not easy
  39. How to create your lovely color scheme?

  40. Case study: iceberg.vim http://cocopon.github.io/iceberg.vim/

  41. First: decide a concept ╭──────────────────────────────╮ │ │ │ I want

    a dark, blue one... │ │ │ ╰──────────────────────────────╯ O o . ∩ ∩ (ɾωɾ)
  42. ICEBERG!!

  43. Q: Why decide a concept first?

  44. A: It will help you to decide coloration in various

    aspects I will explain about that later
  45. Development flow ╭─────────────────────────────────╮ │ Create a new file: iceberg.vim │

    ╰─────────────────────────────────╯ │ ┌───────────────────▶│ │ ▼ │ ╭─────────────────────────────────╮ │ │ Add some definitions by :hi │ │ ╰─────────────────────────────────╯ │ │ │ │ │ ▼ │ ╭─────────────────────────────────╮ │ │ Save, :source % to apply them │ │ ╰─────────────────────────────────╯ │ │ └────────────────────┘
  46. Let’s start from here * Run your Vim without any

    color scheme * And then :hi clear to clear existing highlightings
  47. Pick default bg/fg color Background #161821 Foreground #c6c8d1

  48. Apply default bg/fg color to groups Normal and EndOfBuffer is

    for them Normal EndOfBuffer
  49. hi! Normal guibg=#161821 guifg=#c6c8d1 hi! EndOfBuffer guibg=#161821 guifg=#c6c8d1

  50. Before After

  51. Pick representative colors #e27878 #e2a478 #b4be82 #89b8c2 #84a0c6 #a093c7 It

    will help you to keep an ambience of the color scheme Default background color: #161821
  52. BTW, highlighting has a link structure Use :hi link to

    link a group to another group :hi! link jsFunction Function ╭────────────╮ ╭──────────╮ ╭───────────────╮ │ jsFunction │ ─▶ │ Function │ ─▶ ··· ─▶ │ guifg=#e2a478 │ ╰────────────╯ ╰──────────╯ ╰───────────────╯
  53. Top level groups are called “preferred group” (Filetype etc.) ┊

    Minor ┊ Preferred ┊ ┊ ╭─────────────╮ ┊ ╭─────────────╮ ┊ ╭────────────╮ │ jsFunction │──────▶│ Function │──────▶│ Identifier │ ╰─────────────╯ ┊ ╰─────────────╯ ┊ ╰────────────╯ ┊ ┊ ╭─────────────╮ ┊ ╭─────────────╮ ┊ ╭────────────╮ │ ··· │──────▶│ String │─┬────▶│ Constant │ │ ··· │──────▶│ Character │─┤ ┊ ╰────────────╯ │ ··· │──────▶│ Number │─┤ ┊ │ ··· │──────▶│ ┊ │ ┊ ┊ ╰─────────────╯ ┊ ╰─────────────╯ ┊ ┊ ┊ ╭─────────────╮ ┊ ╭─────────────╮ ┊ ╭────────────╮ │ ··· │──────▶│ Conditional │─┬────▶│ Statement │ │ ··· │──────▶│ Repeat │─┤ ┊ ╰────────────╯ │ ··· │──────▶│ Label │─┤ ┊ │ ··· │──────▶│ ┊ │ ┊ ┊ ╰───────── ───╯ ┊ ╰─────────────╯ ┊ :help group-name to see the list of the groups
  54. Apply colors to preferred groups ██ #e27878 ─▶ Error ██

    #e2a478 ─▶ Function (minor group but frequently used) ██ #b4be82 ─▶ PreProc, Special ██ #89b8c2 ─▶ Identifier, Type ██ #84a0c6 ─▶ Statement ██ #a093c7 ─▶ Constant They make an ambience of your color scheme
  55. Before Looks better! After

  56. TIPS: Use HSB/HSL color model to choose colors GIMP, Inkscape,

    Photoshop, Illustrator ... some kind of graphics software has the feature It makes easy to create a harmonious palette
  57. Change only hue to create initial colors Primary HSB(215°, 33%,

    78%) Hue: 0° Hue: 30° Hue: 90° Hue: 180° Hue: 250° ─▶ Fix saturation and brightness at first, and fine-tune them later
  58. Q: Why create a color palette first?

  59. A: It will prevent the number of colors from explodingly

    increasing
  60. an Character ColorColumn Comment Concea tional Constant cssBraces cssClassName cssCla

    eudoClassId cssTagName CtrlPMatch CtrlPMode1 CtrlPM PrtCursor Cursor CursorColumn CursorIM Cursor rLineNr Debug Define Delimiter denite eMatchedChar DiffAdd diffAdded DiffChange DiffDe emoved DiffText Directory EasyMotionShade EasyMo otionTarget2First EasyMotionTarget2Second EndOfBuffer Error ErrorM tion Float FoldColumn Folded Functi tterAdd GitGutterChange GitGutterChangeDelete GitGutterDelete graphq qlOperator graphqlStructure helpHyperTextJump htmlArg htmlEn ag icebergALAccentRed Identifier Ignore Includ archKeyword Label lCursor LineNr Macro Paren ModeMsg MoreMsg NonText Normal r Operator phpVarSelector plug1 plug2 ash plugMessage Pmenu PmenuSbar PmenuS Thumb PreCondit PreProc Question QuickF t Search SignColumn Special Specia alComment SpecialKey SpellBad SpellCap SpellL Rare Statement StatusLine StatusLineNC Status sLineTermNC StorageClass String Structure swiftI sticError SyntasticErrorSign SyntasticStyleError SyntasticStyleErrorSign Syntas sticStyleWarningSign SyntasticWarning SyntasticWarningSign TabLine TabLin neSel Tag Title Todo Type ef Underlined VertSplit vimContinue vimIsC l VisualNOS WarningMsg WildMenu xmlAtt dTag xmlNamespace xmlTag xmlTagName yamlKe There are huge amount of highlighting groups
  61. So if you select a color for each group, a

    huge amount of similar colors will be generated It will cause many bad effects: increasing maintenance cost, breaking an ambiance, etc.
  62. highlight-groups highlight-default These are the default highlighting groups. These groups

    are used by the 'highlight' option default. Note that the highlighting depends on the value of 'background'. You can see the current settings with the ":highlight" command. hl-ColorColumn ColorColumn used for the columns set with 'colorcolumn' hl-Conceal Conceal placeholder characters substituted for concealed text (see 'conceallevel') hl-Cursor Cursor the character under the cursor hl-CursorIM CursorIM like Cursor, but used when in IME mode CursorIM hl-CursorColumn CursorColumn the screen column that the cursor is in when 'cursorcolumn' is set Define colors for default highlighting groups :help highlight-groups to see the list for them :help highlight-groups
  63. Pick colors that is close in hue They will make

    the ambience stronger Background #161821 Hue: 229° Foreground #c6c8d1 Hue: 229° LineNr (bg) #1e2132 Hue: 231° LineNr (fg) #444b71 Hue: 231° StatusLine (bg) #818596 Hue: 229°
  64. Before After Ah...lovely... <3

  65. Useful tools to cover all highlighting groups $VIMRUNTIME/syntax/hitest.vim colorswatch.vim

  66. Create a color palette first, and then apply it to

    each groups It will help you to keep an ambience of the color scheme
  67. Make your color scheme more lovely

  68. Strategy Increase positive features and reduce negative features ╭───────────────────────────────────╮ ╭───────────────────────────────────╮

    │ Increasing positive features │ │ Reducing negative features │ │ will increase fan of your scheme │ │ will decrease abandonment rate │ │ ───────────────────────────────── │ │ ───────────────────────────────── │ │ · Support various filetypes │ & │ · Support 256 colors │ │ · Support famous plugins │ │ · Think about warning color │ │ · Add some identities │ │ · Think about color vision │ │ · Highlight only important groups │ │ │ ╰───────────────────────────────────╯ ╰───────────────────────────────────╯
  69. Increase positive features

  70. Adjust coloration for various filetypes CSS XML TypeScript

  71. CSS XML TypeScript Is this coloration cool?

  72. Too much orange...?

  73. ...more blue! Remember the concept

  74. Use syntax-specific groups Syntax-specific groups are defined by each syntax

    files vimAbb vimAddress vimAugroup vimAugroupError vimAugroupKey vimAugroupSyncA vimAuHighlight vimAuSyntax vimAutoCmd vimAutoCmdOpt vimAutoCmdSfxList vimAutoCmdSpace vimAutoEvent vimAutoEventList vimAutoSet vimBehave xmlAttrib xmlAttribPunct xmlCdata xmlCdataCdata xmlCdataEnd xmlCdataStart xmlComment xmlCommentError xmlCommentPart xmlCommentStart xmlDocType xmlDocTypeDecl xmlDocTypeKeyword xmlEndTag xmlEntity xmlEntityPunct cssAnimationAttr cssAnimationProp cssAttr cssAttrComma cssAttributeSelector cssAttrRegion cssAuralAttr cssAuralProp cssBackgroundAttr cssBackgroundProp cssBorderAttr cssBorderProp cssBoxAttr cssBoxProp cssBraceError cssBraces $VIMRUNTIME/syntax/css.vim $VIMRUNTIME/syntax/vim.vim $VIMRUNTIME/syntax/xml.vim ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... $VIMRUNTIME/sy
  75. Adjust coloration :hi! link is useful for adjusting coloration hi!

    link typescriptAjaxMethods Normal hi! link typescriptBraces Normal hi! link typescriptEndColons Normal hi! link typescriptGlobalObjects Statement hi! link typescriptHtmlElemProperties Normal hi! link typescriptIdentifier Statement hi! link typescriptMessage Normal hi! link typescriptNull Constant hi! link typescriptParens Normal
  76. Result Before (much orange) After

  77. TIPS: Looking for the unknown highlighting group How about my

    plugins (pgmnt.vim and colorswatch.vim) First, move cursor to the position that you want to know the highlight info
  78. TIPS: Looking for the unknown highlighting group How about my

    plugins (pgmnt.vim and colorswatch.vim) And then execute :PgmntDevInspect
  79. TIPS: Looking for the unknown highlighting group How about my

    plugins (pgmnt.vim and colorswatch.vim) It will print the link structure of the highlight group
  80. Support famous plugins e.g. EasyMotion Before After

  81. Support famous plugins e.g. lightline.vim Before After

  82. Highlight only important groups “this” is important keyword in JavaScript

    but hard to find (much orange...)
  83. Highlight only important groups Less orange, easy to find “this”

  84. Add some identities ↓ CREVASSE

  85. Add some identities ↑ CREVASSE

  86. Reduce negative features

  87. Support 256 (cterm) colors :hi! Normal ctermbg=234 ctermfg=252 ctermbg is

    for background color, ctermfg is for foreground color
  88. Support 256 (cterm) colors Use color chart to picking colors

    https://commons.wikimedia.org/ wiki/File:Xterm_256color_chart.svg
  89. Before After Support 256 (cterm) colors

  90. Think about warning color Reddish colors are usually used as

    warning color Destructive options on iOS ISO 3864 DANGER WARNING CAUTION https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/ https://www.iso.org/obp/ui/#iso:std:iso:3864:-1:en
  91. Iceberg refrains from using red colors Only uses them for

    error, warning, and other appropriate elements
  92. Think about color visions Not everyone have the same color

    visions Normal Protanopia Dark red should not be used on dark background
  93. Contrast colors by brightness, not hue Normal Red Normal Red

    Normal Red Normal Red ↓ ↓
  94. And...

  95. Learn from great forerunners

  96. To make your color scheme more lovely, increase positive features

    and reduce negative features And... learn from great forerunners
  97. How to find great forerunners?

  98. Long ago: VIM Color Scheme Test https://web-beta.archive.org/web/*/http://vimcolorschemetest.googlecode.com/

  99. Recently: vimcolors.com http://vimcolors.com/

  100. But I have some frustrations... ╭──────────────────────────────────────────╮ │ │ │ What

    really I want to do is not │ │ to see a huge amount of color schemes, │ │ but finding the best one! │ │ │ ╰──────────────────────────────────────────╯ O o . ∩ ∩ (ɾωɾ)
  101. So I developed a new web app

  102. colorswat.ch http://colorswat.ch/vim/

  103. Sorting by GitHub stars

  104. More accurate preview vimcolors.com Tab/EOL characters, line number, cursor, cursorline,

    etc. colorswat.ch
  105. References You can see the source of color schemes

  106. References: Example onedark is based on FlatColor that is based

    on pencil onedark FlatColor pencil ◀┄┄ ◀┄┄
  107. And... mobile friendly ;)

  108. colorswat.ch is useful to find great forerunners

  109. Inside colorswat.ch

  110. System overview ┊ Server ┊ Client ┊ ┊ Snapshot text

    ┊ ┊ ╭─────────────────╮ (JSON) ┊ ╭───────────────╮ (HTML) ┊ ╭─────────────────╮ ╭────────────╮ ┌ │ snapbuffer.vim │ ──────────────────▶ │ │ ───────▶ │ │ │ │ │ ╰─────────────────╯ ┊ │ Server App │ ┊ │ Client App │ │ Vim buffer │ ─┤ ┊ │ │ ┊ │ │ │ │ │ ╭─────────────────╮ ┊ │ (Node.js) │ ┊ │ (React + Redux) │ ╰────────────╯ └ │ colorswatch.vim │ ──────────────────▶ │ │ ◀──────▶ │ │ ╰─────────────────╯ Highlighting data ┊ ╰───────────────╯ (JSON) ┊ ╰─────────────────╯ (JSON) ┊ ┊ ┊ ┊ ┊ ┊
  111. Taking a shot of the buffer Using snapbuffer.vim to extract

    accurate buffer information
  112. Extracting highlighting data Using colorswatch.vim to extract all highlighting data

  113. Q: So, how does colorswat.ch find color schemes?

  114. A: My power of love

  115. Source of color schemes Web/Twitter search Recommendation from users (colorswat.ch)

  116. Roadmap * Diff mode support * Missing components: StatusLine, VirtSplit,

    etc. * Other editors support (Atom, VS Code, ...) * Re-implemented server in Go ʕ◔ϖ◔ʔ * Author page * ...
  117. colorswat.ch is made with my love

  118. Conclusion

  119. To create your lovely color scheme,

  120. Decide a concept

  121. Remember the concept when in doubt

  122. Learn from great forerunners

  123. Visit colorswat.ch

  124. There are as many color preferences
 as there are people

  125. Enjoy creating your color scheme!

  126. Creating Your Lovely Color Scheme Hiroki Kokubun (@cocopon), #vimconf2017

  127. None
  128. Appendix

  129. Use HSL color model in Vim script pgmnt.vim provides the

    feature ··· let hue_red = 0 let hue_orange = 25 let hue_green = 70 ··· let g_blue = pgmnt#color#hsl(hue_blue, 0.37, 0.65) let g_green = pgmnt#color#hsl(hue_green, 0.32, 0.63) let g_lblue = pgmnt#color#hsl(hue_lblue, 0.32, 0.65) ··· If you interested, see iceberg.vim/src/ for the usage case
  130. Related function: synID() Get a syntax ID of the cursor

    ╭───────────────────────────────╮ │ synID(line('.'), col('.'), 1) │ ─▶ syntax_id ╰───────────────────────────────╯
  131. Related function: synIDattr() Get attributes of the syntax by ID

    ╭──────────────────────────────╮ │ synIDattr(syntax_id, {what}) │ ─▶ syntax_attr ╰──────────────────────────────╯ ╭──────────────────────────────╮ │ synIDattr(syntax_id, 'name') │ ─▶ 'String' ╰──────────────────────────────╯ ╭──────────────────────────────╮ │ synIDattr(syntax_id, 'bg') │ ─▶ '#89b8c2' ╰──────────────────────────────╯ ┊
  132. Related function: synIDtrans() Follow linking groups ╭───────────────────────╮ │ synIDtrans(syntax_id) │

    ─▶ translated_syntax_id ╰───────────────────────╯