【原创】让大语言模型为你设计Base16配色方案
179
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.
收藏的用户(0)
X
正在加载信息~
原创
著作权归文章作者所有。
最新回复 (
3 )
-
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 楼主
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
.....
Tillreetree
UID:
2
管理员组
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.
主题数 69 |
帖子数 111 |
0 精华数 |
作者最近主题:
热门主题