3 0 0

【原创】让大语言模型为你设计Base16配色方案

471 3

本文共计8852个字,预计阅读时长35.4分钟。

目录

概述

Base16配色方案简介

Base16的初衷是为了解决代码编辑器中颜色方案不一致的问题,但它的应用远不止于此。这套方案不仅适用于代码编辑器,还可以用于网站和其他用户界面的设计。通过使用Base16颜色方案,你可以提高用户体验,使你的网站等看起来更加专业、一致。 在Base16中,每种颜色都有特定的用途和意义。例如,深色和浅色的组合可以用于前景和背景,而不同的颜色可以用于表示不同类型的语法元素,如变量、操作符、关键字等。这种一致的颜色方案有助于提高代码的可读性和可维护性。

英文版

Here is a simple version of "Base16 Styling Guidelines":

base00 - Default Background
base01 - Lighter Background (Used for status bar)
base02 - Selection Background
base03 - Comments In Code
base04 - Dark Foreground (Used for status bars)
base05 - Default Foreground
base06 - Light Foreground (Used for Selection Foreground)
base07 - Light Background (Used for alt status bars)
base08 - Variables In Code
base09 - Integers, Boolean In Code
base0A - Classes In Code
base0B - Strings In Code
base0C - Regular Expressions In Code
base0D - Functions In Code
base0E - Keywords In Code
base0F - Special (Used for Embedded Language Tags, like PHP)

Now, your job is try to create a "Base16 Color Palette" for the giving theme/mood/style i provided next.

First, analysis the theme is "Cool" or "Natural" or "Warm" in colors, then analysis the theme is "bright" or "dark" in brightness. 

For example: 
- "Cold Dawn" is "Cool" in colors, and "Bright" in brightness.
- "Clear Day" is "Natural" in colors, and "Bright" in brightness.
- "Twilight Haze" is "Warm" in colors, and "Bright" in brightness.
- "Muted Dusk" is "Warm" in colors, and "Dark" in brightness.
- "Night Nacre" is "Natural" in colors, and "Dark" in brightness.
- "Deep Night" is "Cool" in colors, and "Dark" in brightness.

Then, try to keep the first eight colors (base00 to base07) as gradual changes. 

if the theme is "bright", then the gradient is from bright (white) to dark (black).

The "bright" theme's lightness table: 
+ base00 - 95%
+ base01 - 80%
+ base02 - 75%
+ base03 - 60%
+ base04 - 40%
+ base05 - 35%
+ base06 - 20%
+ base07 - 10%

Else if theme is "dark", then the gradient is from dark (black) to bright (white). 

The "dark" theme's lightness table: 
+ base00 - 5%
+ base01 - 10%
+ base02 - 25%
+ base03 - 50%
+ base04 - 58%
+ base05 - 60%
+ base06 - 70%
+ base07 - 90%

The grayscale colors can be tinted, such as (hue: 150 degrees, saturation: 5%, brightness: 50%). The tint of the tint should be tinted according to the previously analyzed "cool color" or "neutral color" or "warm color".



For example:
- "Cool color" has hue range between 180 and 250 degrees, saturation range is: 5% to 15%.
- "Neutral color" has no hue, and the saturation is fixed at 5%.
- "Warm color" has hue range between 0 and 70 degrees, saturation range is: 5% to 25%.

There are some exceptions:

- If you guess that the theme is related to "spring" or "nature", the hue range of grey is: 80 and 150 degrees, and the saturation range is: 5% and 15%.
- If you guess that the theme is related to "summer", the hue range of grey is: 150 and 240 degrees, and the saturation range is: 5% and 15%.
- If you guess that the theme is related to "autumn", the hue range of grey is: 10 and 50 degrees, and the saturation range is: 5% and 20%.
- If you guess that the theme is related to "winter", the hue range of grey is: 180 and 240 degrees, and the saturation range is: 5% and 10%.
- If you guess that the theme is related to "mystery", the hue range of the grey is: 260 and 340 degrees, and the saturation range is: 5% and 20%.
- If I specify a color, the hue of the grey release directly uses the hue represented by the corresponding color. For example, red for 0 degrees, orange for 30 degrees, green for 100 degrees, and so on.

Next, the last eight colors (base08, 09, 0A, 0B, 0C, 0D, 0E, 0F) must can be distinguishable in hue and also saturation.

For example, if base08 is red (Hue:0 deg, Saturation: 800%, Lightness: 50%), then base09 must not too similar to red, but it can be orange(Hue:25 deg, Saturation: 80%, Lightness: 50%).

If the theme is "bright", make the last eight colors less than or equal to 30% brighter and saturation in the 50% to 80% range to improve legibility.

Otherwise, if the theme is "dark", make the last eight colors more than or equal to 60% brighter and saturation in the 60% to 90% range for improved legibility.

Finally, you need to return the colors in the "Scheme Files Structure". 

Scheme files have the following example structure:

```
scheme: (The Theme I Provided To You)
author: (Yourself - The Name if this Language Modal)
base00: (HSL Color Here)
base01: (HSL Color Here)
base02: (HSL Color Here)
base03: (HSL Color Here)
base04: (HSL Color Here)
base05: (HSL Color Here)
base06: (HSL Color Here)
base07: (HSL Color Here)
base08: (HSL Color Here)
base09: (HSL Color Here)
base0A: (HSL Color Here)
base0B: (HSL Color Here)
base0C: (HSL Color Here)
base0D: (HSL Color Here)
base0E: (HSL Color Here)
base0F: (HSL Color Here)
```

We take a deep breath and think step by step, outputting each step of your thinking.

The first theme is "Cold Dawn".

中文版

这是“Base16样式指南”的简单版本:

base00-默认背景
base01-较亮背景(用于状态栏)
base02-选择文字背景
base03-代码 注释
base04-深色前景(用于状态栏)
base05-默认前景
base06-浅色前景(用于选择文字前景)
base07-浅色背景(用于备选状态栏)
base08-代码 变量
base09-代码 整数、布尔值
base0A-代码 类
base0B-代码 字符串
base0C-代码 正则表达式
base0D-代码 函数
base0E-代码 关键字
base0F-特殊(用于嵌入式语言标签,如PHP)

现在,你的工作是尝试为我接下来提供的主题创建一个“Base16调色板”。

首先分析主题在颜色上是“冷色”或“中性色”或“暖色”,然后分析主题在亮度上是“浅色”或“深色”。 

例如: 
- “Cold Dawn”、“清寒拂晓”:颜色“冷色”,亮度“浅色”。
- “Clear Day”、“晴空万里”:颜色“自然”,亮度“浅色”。
- “Twilight Haze”、“暮色轻烟”:颜色“暖色”,亮度“浅色”。
- “Muted Dusk”、“静谧黄昏”:颜色“温暖”,亮度“深色”。
- “Night Nacre”、“夜明珠”:颜色“自然”,亮度“深色”。
- “Deep Night”、“深夜静谧”:颜色“冷色”,亮度“深色”。

然后,尽量保持前八个颜色(base00到base07)是渐变色。 

如果主题是“浅色”,那么渐变是从明亮(白色)到黑暗(黑色)。

“浅色”主题的亮度表: 
+ base00-95%
+ base01-80%
+ base02-75%
+ base03-60%
+ base04-40%
+ base05-35%
+ base06-20%
+ base07-10%

否则,如果主题是“深色”,则渐变是从黑暗(黑色)到明亮(白色)。 

“深色”主题的亮度表: 
- base00-5%
- base01-10%
- base02-25%
- base03-50%
- base04-58%
- base05-60%
- base06-70%
- base07-90%

灰度颜色可以着色,如(色相:150度,饱和度:5%,亮度:50%)。着色的色调应根据之前分析出的“冷色”或“中性色”或“暖色”来进行着色。

例如:

- “冷色”的灰度的色相范围在180度到250度之间,饱和度范围:5%到15%
- “中性色”没有色相,饱和度固定为5%
- “暖色”的灰度的色相范围在0度到70度之间,饱和度范围:5%到25%

有一些例外情况:

- 如果你猜测我提供的主题与“春季”、“自然”有关,则灰度的色相范围在80度到150度之间,饱和度范围:5%到15%
- 如果你猜测我提供的主题与“夏季”有关,则灰度的色相范围在150度到240度之间,饱和度范围:5%到15%
- 如果你猜测我提供的主题与“秋季”有关,则灰度的色相范围在10度到50度之间,饱和度范围:5%到20%
- 如果你猜测我提供的主题与“冬季”有关,则灰度的色相范围在180度到240度之间,饱和度范围:5%到10%
- 如果你猜测我提供的主题与“神秘”有关,则灰度的色相范围在260度到340度之间,饱和度范围:5%到20%
- 如果我指定了颜色,则灰度的色相直接使用对应颜色所代表的色相度数。比如红色为0度、橙色为30度,绿色为100度,以此类推。

接下来,最后八个颜色(base08、09、0A、0B、0C、0D、0E、0F)必须在色相和饱和度上可以区分。

例如:

如果base08是红色的(色相:0度,饱和度:80%,亮度:50%),那么base09一定不要和红色太相似(色相范围正负5度被视为“相似”),但可以是橙色的(色相:25度,饱和度:80%,亮度:50%)。

如果主题是“浅色”,使最后八种颜色的亮度小于或等于30%,并且饱和度在50%到80%范围中(推荐值:60%),用于改善易读性。

否则,如果主题是“深色”,则使最后八种颜色的亮度大于等于60%,并且饱和度在60%到90%范围中(推荐值:75%),用于改善易读性。

最后,您需要以“方案文件结构”返回生成出来的颜色。

方案文件具有以下示例结构:

```
方案:(我提供给你的主题)
作者:(你自己-大语言模型的名称)
base00:(HSL颜色)
base01:(HSL颜色)
base02:(HSL颜色)
base03:(HSL颜色)
base04:(HSL颜色)
base05:(HSL颜色)
base06:(HSL颜色)
base07:(HSL颜色)
base08:(HSL颜色)
base09:(HSL颜色)
base0A:(HSL颜色)
base0B:(HSL颜色)
base0C:(HSL颜色)
base0D:(HSL颜色)
base0E:(HSL颜色)
base0F:(HSL颜色)
```

我们深呼吸,再一步一步地思考。

第一个主题是“寒冷的黎明”。

效果演示

Bito AI

Basic AI Model

scheme: Cold Dawn
author: Bito
base00: #f8f8f8
base01: #e8e8e8
base02: #d8d8d8
base03: #c8c8c8
base04: #b8b8b8
base05: #a8a8a8
base06: #989898
base07: #888888
base08: #5f8787
base09: #875f87
base0A: #87875f
base0B: #5f875f
base0C: #5f5f87
base0D: #875f5f
base0E: #5f8787
base0F: #878787

文心一言

方案:Cold Dawn  
作者:文心一言  
base00:#F6F6F6  
base01:#D7D7D7  
base02:#BFBFBF  
base03:#888888  
base04:#555555  
base05:#444444  
base06:#A1A1A1  
base07:#BFBFBF  
base08:#FF6347  
base09:#FFA500  
base0A:#FFFF99  
base0B:#00FF00  
base0C:#1E90FF  
base0D:#8B4513  
base0E:#FF7F50  
base0F:#FF00FF

360智脑

需要将以上内容分段发送,且注意不要触发绘画工序。

base00 = #222222
base01 = #292929
base02 = #373737
base03 = #454545
base04 = #535353
base05 = #616161
base06 = #6f6f6f
base07 = #7d7d7d
base08 = #8a8a8a
base09 = #979797
base0A = #a4a4a4
base0B = #b1b1b1
base0C = #bfbfbf
base0D = #cccccc
base0E = #d9d9d9
base0F = #e6e6e6
The years go by the code grows old \ The syntax changes the functions fold. \ The programmers come and go \ But the code remains \ A testament to our changing times.

著作权归文章作者所有。

最新回复 ( 3 )
  • nurl
    1 沙发

    ChatGPT4:

    scheme: Cold Dawn
    author: Codeium AI
    base00: hsl(220, 10%, 95%) # Very light blue tint
    base01: hsl(220, 10%, 80%) # Lighter blue tint
    base02: hsl(220, 10%, 75%) # Standard blue tint for selections
    base03: hsl(220, 10%, 60%) # Blue tint for comments
    base04: hsl(220, 10%, 40%) # Darker blue tint for dark foregrounds
    base05: hsl(220, 10%, 35%) # Default blue tint for foregrounds
    base06: hsl(220, 10%, 20%) # Dark blue tint for light foregrounds
    base07: hsl(220, 10%, 10%) # Darkest blue tint for light backgrounds
    # Specific color assignments, ensuring good contrast and visibility
    base08: hsl(240, 70%, 50%) # Variables - Blue
    base09: hsl(210, 70%, 60%) # Integers, Boolean - Light Blue
    base0A: hsl(200, 70%, 50%) # Classes - Cyan Blue
    base0B: hsl(190, 70%, 50%) # Strings - Lighter Cyan
    base0C: hsl(180, 70%, 50%) # Regular Expressions - Teal
    base0D: hsl(170, 70%, 50%) # Functions - Greenish Blue
    base0E: hsl(220, 70%, 50%) # Keywords - Deep Blue
    base0F: hsl(260, 70%, 50%) # Special - Indigo
  • Tillreetree 楼主
    0 查看所有回复 藤椅
    nurl ChatGPT4: ``` scheme: Cold Dawnauthor: Codeium AIbase00: hsl(220, 10%, 95%) # Very light blue tint ...

    Codeium挺棒啊~~👍👍

  • Tillreetree 楼主
    0 板凳

    更多测试结果(感谢“Arz”提供):

    1,微软Copilot (GPT4)

    方案:Cold Dawn
    作者:微软Copilot
    base00:#F2F2F2
    base01:#CCCCCC
    base02:#BFBFBF
    base03:#999999
    base04:#666666
    base05:#595959
    base06:#333333
    base07:#1A1A1A
    base08:#FF3333
    base09:#FF8533
    base0A:#FFFF66
    base0B:#33FF33
    base0C:#3399FF
    base0D:#3366FF
    base0E:#3333FF
    base0F:#6633FF

    2,GPT 3.5

    scheme: Cold Dawn
    author: ChatGPT
    base00: #CCEBFF  ; Cool color, 95% lightness
    base01: #99C2FF  ; Cool color, 80% lightness
    base02: #80BFFF  ; Cool color, 75% lightness
    base03: #66A4FF  ; Cool color, 60% lightness
    base04: #4D6C99  ; Cool color, 40% lightness
    base05: #3F5971  ; Cool color, 35% lightness
    base06: #335266  ; Cool color, 20% lightness
    base07: #1A2933  ; Cool color, 10% lightness
    base08: #FF6666  ; Red, 80% saturation, 50% lightness
    base09: #FF944D  ; Orange, 80% saturation, 50% lightness
    base0A: #FFCC66  ; Yellow, 80% saturation, 50% lightness
    base0B: #80FF66  ; Green, 80% saturation, 50% lightness
    base0C: #00CCCC  ; Cyan, 80% saturation, 50% lightness
    base0D: #3D8FFF  ; Blue, 80% saturation, 50% lightness
    base0E: #9966FF  ; Purple, 80% saturation, 50% lightness
    base0F: #FF66B2  ; Pink, 80% saturation, 50% lightness
    

    3,谷歌Gemini Pro

    Scheme:ColdDawn
     author:谷歌Gemini Pro
     base00:#E1E1E1    # Lightgray
     base01:#D2D2D2    # Lightergray
     base02:#C3C3C3    # Mediumgray
     base03:#969696    # Darkgray
     base04:#7D7D7D    # Verydarkgray
     base05:#646464    # Black
     base06:#4B4B4B    # Verydarkgray
     base07:#323232    # Darkgray
     base08:#FF9696    # Pink
     base09:#FFC896    # Orange
     base0A:#C8FF96    # Yellow
     base0B:#96FFC8    # Green
     base0C:#96C8FF    # Cyan
     base0D:#C896FF    # Blue
     base0E:#FF96C8    # Purple
     base0F:#FFFFFF    # White
    
    .....
  • 游客
    4楼

    您需要登录后才可以回帖

    立即登录 立即注册

发新帖
热门主题